Question

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

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

绘制图像到画布功能：

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.innerWidth，window.innerHeight用于在父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

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

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

你会得到两张图片几乎同时更新画布，只会出现一张。

另外，wolfhammer说的是正确的。如果设置画布的大小，则清除它，因此将一个图像一个接一个地绘制，即使它们的尺寸较小并且两者都显示，也只显示最后一个。请查看此链接，了解如何解决此问题：Preventing Canvas Clear when Resizing Window

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

Answer 2

当您设置画布的宽度和高度时，＆＃34; Photo＆＃34;被清除了。如果确实需要调整大小，我会提供调整大小功能。

request_stream << "Content-Type: application/x-www-form-urlencoded";

＆＃13;

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

＆＃13;

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

＆＃13;

#can {
  border:1px solid red;
}

＆＃13;

将另一个图像绘制到画布上

2 个答案: