在画布上绘制另一个图像

Question

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

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

“将图像绘制到画布”功能：

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");
}

画布上的window.inner宽度、window.inner高度是为了让画布在父div的全屏中。

编辑评论：

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

设置画布的宽度和高度时，“照片”上的数据将被清除。如果真的需要调整大小，我提供了一个调整大小的功能。

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);
    }
}

var can = document.getElementById('can');
var ctx = can.getContext('2d');
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(20, 90);
ctx.lineTo(50, 10);
ctx.lineTo(80, 90);
ctx.lineTo(10, 40);
ctx.lineTo(90, 40);
ctx.lineTo(20, 90);
ctx.fill();


var btn = document.getElementById('btnResize');
btn.addEventListener('click', function() {
  resize(can, can.width * 2, can.height * 2);
});

function resize(can, w, h) {
  var ctx = can.getContext('2d');

  // copy
  var can2 = document.createElement('canvas');
  var ctx2 = can2.getContext('2d');
  can2.width = can.width;
  can2.height = can.height;
  ctx2.drawImage(can, 0, 0);
  
  // resize
  can.width = w;
  can.height = h;
  ctx.drawImage(can2, 0, 0, can2.width, can2.height, 0, 0, w, h);
}

#can {
  border:1px solid red;
}

html lang-html prettyprint-override"><button id='btnResize'>Size x 2</button><br/>
<canvas id="can" width="100" height="100"></canvas>

Answer 2

drawImage函数异步工作，它开始加载图像并立即退出。然后，当图像加载时，画布被更新。如果您运行以下操作：

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

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

还有，沃尔夫哈默说的是对的。如果你设置了画布的大小，你就清除了它，所以一个接一个地绘制图像，即使它们是较小的尺寸并且应该都出现，也只会显示最后一个。查看此链接了解如何解决：调整窗口大小时防止画布清除

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