将两张图片上传到 html5 画布中

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

我已经修改了原来的 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 的修复）。

Answer 2

当你尝试在单个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]);
    }
}

替代：

或者您可以做的是使用canvas 的globalAlpha 属性。

尝试：ctx.globalAlpha = 0.5;。这可能会解决您的问题。

备选方案 2：

您可以将multiple canvas layer 用于多张图片。这将直接叠加您的图像。您可以叠加任意数量的图像。