Question

我正在尝试将两个或更多图像上传到一个画布中并制作某种拼贴画。图片尺寸相同。但是，当我尝试上传第二张图片时，第一张图片就会消失。下面是JSfiddle的代码和示例。怎么了？ jsfiddle

<div>
<input type="file" id="imageLoader1" name="imageLoader" />
<br/>
<input type="file" id="imageLoader2" name="imageLoader" />
<br/>
<canvas id="canvas" style="background:red;"></canvas>
</div>

和JS代码：

var imageLoader1 = document.getElementById('imageLoader1');
var imageLoader2 = document.getElementById('imageLoader2');
imageLoader1.addEventListener('change', handleImage, false);
imageLoader2.addEventListener('change', handleImage, false);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function handleImage(e) {
    if (e.target == imageLoader1) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var img1 = new Image();
            img1.onload = function () {
                canvas.width = 1000;
                canvas.height = 500;
                ctx.drawImage(img1, 0, 0, img1.width, img1.height, 0, 0, img1.width * 0.4, img1.height * 0.4);
            }
            img1.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }
    if (e.target == imageLoader2) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var img2 = new Image();
            img2.onload = function () {
                canvas.width = 1000;
                canvas.height = 500;
                ctx.drawImage(img2, 0, 0, img2.width, img2.height, img2.width * 0.4, img2.height * 0.4, img2.width * 0.4, img2.height * 0.4);
            }
            img2.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }
}

这个想法来自：How to upload image into HTML5 canvas

Answer 1

当您尝试在单个canvas中叠加多个图像时，您需要使用两个不同的paths，您还需要使用.beginPath()方法明确区分它们。

我修改了你的代码，请检查。它应该适合你。

function handleImage(e) {
    if (e.target == imageLoader1) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var img1 = new Image();
            img1.onload = function () {
                canvas.width = 1000;
                canvas.height = 500;
                //added begin path here
                ctx.beginPath();
                ctx.drawImage(img1, 0, 0, img1.width, img1.height, 0, 0, img1.width * 0.4, img1.height * 0.4);
            }
            img1.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }
    if (e.target == imageLoader2) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var img2 = new Image();
            img2.onload = function () {
                canvas.width = 1000;
                canvas.height = 500;
                //added begin path here
                ctx.beginPath();
                ctx.drawImage(img2, 0, 0, img2.width, img2.height, img2.width * 0.4, img2.height * 0.4, img2.width * 0.4, img2.height * 0.4);
            }
            img2.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }
}

替代：

或者您可以使用globalAlpha的{{1}}属性。

尝试：canvas。这可以解决您的问题。

替代2：

您可以将ctx.globalAlpha = 0.5;用于多张图片。这将直接叠加您的图像。您可以根据需要添加任意数量的图像。

Answer 2

我已经修改了原始jsfiddle：click。

此处已更改：

var imageLoader1 = document.getElementById('imageLoader1');
var imageLoader2 = document.getElementById('imageLoader2');
imageLoader1.addEventListener('change', handleImage, false);
imageLoader2.addEventListener('change', handleImage, false);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
let z = 0.4; // zoom

canvas.width = 1000;
canvas.height = 500;

function handleImage(e) {
  if (e.target == imageLoader1) {
    let img = new Image();
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function() {
      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width * z, img.height * z);
    }
  }

  if (e.target == imageLoader2) {
    let img = new Image();
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function() {
      ctx.drawImage(img, 0, 0, img.width, img.height, img.width * z, img.height * z, img.width * z, img.height * z);
    }
  }
}

我已将画布初始化移出了加载处理程序，并简化了加载器。

此解决方案不会叠加您的图片（但这只是对问题中原始jsfiddle的修复）。

将两个图像上传到html5画布

2 个答案: