Question

我有一个使用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>

Answer 1

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

    <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>

将JPEG图层添加到Canvas（使用Caman）

1 个答案: