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

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>