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