Html 将JPEG层添加到画布（使用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>

$（函数（）{
var canvas=document.getElementById（'image1'）；
卡曼（“#image1”，“pic.jpg”，函数（）{
此.brightness（50.render（）；
});
//添加文本层
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
背景。drawImage（imageObj，69,50）；
};
imageObj.src='yoda.jpg'；
});

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

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

$（函数（）{
var canvas=document.getElementById（'image1'）；
卡曼（“#image1”，“pic.jpg”，函数（）{
这个.greyscale（）.render（）；
this.newLayer（函数（）{
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
drawImage（imageObj，0,0）；
};
imageObj.src='overlay.png'；
});
});
});