将JPEG图层添加到Canvas(使用Caman)

时间:2014-01-19 11:26:18

标签: html5 canvas html5-canvas camanjs

我有一个使用Caman库操作的图像。

我正在尝试将jpeg叠加到被操纵的图像上。

我可以看到jpeg在被操纵的图像下方出现了一瞬间,但是一旦被操纵的图像完全加载,它就会快速叠加。

无论代码在下面的顺序是什么,叠加图像都位于被操纵的图像下方。

这有明显的解决方案吗?谢谢!

    <script>
    $(function() {

        var canvas = document.getElementById('image1');

        Caman("#image1", "pic.jpg", function () {
          this.brightness(50).render();
        });

        //add text layer
        var context = canvas.getContext('2d');
        var imageObj = new Image();

        imageObj.onload = function() {
            context.drawImage(imageObj, 69, 50);
        };
        imageObj.src = 'yoda.jpg';

    });
    </script>

1 个答案:

答案 0 :(得分:3)

可能需要一点点重构,但这就是我做到的:

    <script>
    $(function() {

        var canvas = document.getElementById('image1');

        Caman("#image1", "pic.jpg", function () {
            this.greyscale().render();
            this.newLayer(function () {
                var context = canvas.getContext('2d');
                var imageObj = new Image();
                imageObj.onload = function() {
                    context.drawImage(imageObj, 0, 0);
                };
                imageObj.src = 'overlay.png';
            });
        });

    });
    </script>