javascript - 将另一张图像绘制到 Canvas 上

Question

所以我正在创建一个cordova应用程序，我从iPhone库中拍摄一张照片，将其绘制到 Canvas 上并向其中添加另一张图像，以便将其另存为一张照片。到目前为止，我从 iPhone 照片库中绘制的照片可以毫无问题地绘制到 Canvas 上，但第二张图像却没有。

当我加载第二个图像时，它首先被添加到具有绝对定位的 div 中，以便将其移动到我想要的任何位置。之后，我获得实际图像的来源和位置，并尝试将其绘制到 Canvas 上。当我调用一个也执行 canvas2ImagePlugin 功能的方法时，就会绘制第二个图像。最后只保存了第一张照片，没有保存第二张图像。

将图像绘制到canvas函数:

function drawImage(image_source, dx, dy)
{
    var canvas = document.getElementById('Photo');
    var image = new Image();
    image.src = image_source;  
    image.onload = function() {
        c=canvas.getContext("2d");
        c.canvas.width = window.innerWidth;
        c.canvas.height = window.innerHeight;
        c.drawImage(image,dx,dy, window.innerWidth, window.innerHeight);
    }
}

绘制第二张图片并保存的方法:

function saveImage()
{
    var img = $('.ObjectImage').attr('src', $('img:first').attr('src'));
    var imagePosition = $('.ObjectImage').find('img:first').position();
    drawImage(img, imgPosition.left, imgPosition.top);

    window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log(msg);
        },
        function(err){
            console.log(err);
        },
        document.getElementById('Photo')
        );

    alert("Image saved");
}

canvas上的window.innerWidth、window.innerHeight是为了让父div的canvas全屏显示的。

编辑评论:

function drawImage(image_source, dx, dy)
{
    var canvas = document.getElementById('Photo');
    var image = new Image();
    image.onload = function() {
        c=canvas.getContext("2d");
        c.canvas.width = window.innerWidth;
        c.canvas.height = window.innerHeight;
        c.drawImage(image,dx,dy, window.innerWidth, window.innerHeight);
    }

    image.src = image_source;
}

仍然无法工作

Answer 1

drawImage函数异步工作，它开始加载图像并立即退出。然后，当图像加载时， Canvas 就会更新。如果你运行类似的东西:

drawImage('test.jpg',0,0);
drawImage('test2.jpg',0,0);

您将获得几乎同时更新 Canvas 的两张图像，并且只会出现一张。

还有，狼锤说的是对的。如果您设置了 Canvas 的大小，则会将其清除，因此在另一张图像之后绘制图像，即使它们尺寸较小并且应该都出现，也只会显示最后一张图像。检查此链接以了解如何解决该问题:Preventing Canvas Clear when Resizing Window

此外，您正在使用窗口的宽度和高度绘制所有图像，这是没有意义的。可能您想使用图像的宽度和高度(因此 this.width 而不是 window.innerWidth)