在画布上绘制另一个图像

Drawing another image to canvas

本文关键字：另一个 图像 绘制      更新时间：2023-09-26

因此，我正在创建一个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是为了在父分区的全屏中获得画布。

编辑到评论：

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

仍未工作

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

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

你会得到两个图像更新画布大约在同一时间，只有一个会出现。

此外，wolfhammer所说的是正确的。如果设置了画布的大小，则会将其清除，因此，一个接一个地绘制图像，即使它们的大小较小并且应该同时出现，也只会显示最后一个。查看此链接了解如何解决：调整窗口大小时阻止画布清除

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

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

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;
}
<button id='btnResize'>Size x 2</button><br/>
<canvas id="can" width="100" height="100"></canvas>

相关文章：