logo标签列表

画布 - 合并两个图像，返回一个图像HTML对象？

htmlcanvashtml5-canvas
15
我有两个带有不同src url的html img对象。我想使用画布(canvas)将这两个图像合并，并创建一个合并后的img对象。 这是否可能？如何实现？
4个回答
23

您可以使用drawImage。 演示。 代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img1 = loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main);
var img2 = loadImage('http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg', main);

var imagesLoaded = 0;
function main() {
    imagesLoaded += 1;

    if(imagesLoaded == 2) {
        // composite now
        ctx.drawImage(img1, 0, 0);
        
        ctx.globalAlpha = 0.5;
        ctx.drawImage(img2, 0, 0);
    }
}

function loadImage(src, onload) {
    // http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called
    var img = new Image();
    
    img.onload = onload;
    img.src = src;

    return img;
}

根据需要进行调整。 :)

如何将这张图片并排添加到单个画布中 - Subin Babu
并排怎么做？您需要更改drawImage调用以获得所需的行为。 - Juho Vepsäläinen
9

您可以在画布上绘制两个图像，并使用任何叠加模式将它们组合在一起。要从画布中获取位图数据，您可以使用'toDataURL'。只需注意，两个图像都应来自与页面相同的域，否则出于安全原因，您对像素数据的访问将被阻止。

0
你可以在这里找到解决方案，希望能对你有所帮助。
HTML 代码：
<div id="container">
    <input type="file" id="imageLoader" name="imageLoader" />
    <input type="file" id="iimageLoader" name="imageLoader" />
    <canvas id="imageCanvas" width="300" height="300"></canvas> 
    <a id="lnkDownload" href="#">Save image</a>
</div>

JS代码：

var canvas = new fabric.Canvas('imageCanvas', {
  backgroundColor: 'rgb(240,240,240)'
});
canvas.setWidth(300);
canvas.setHeight(300);

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
  var objects = canvas.getObjects();
  for (var i in objects) {
    objects[i].remove();
  }
  var reader = new FileReader();
  reader.onload = function(event) {
    var img = new Image();
    img.onload = function() {
      var imgInstance = new fabric.Image(img, {
        selectable: 1
      })
      canvas.add(imgInstance);
      /* var red = new fabric.Rect({ width: 80, height: 50, fill: 'red'})
      canvas.add(red);
      red.center(); */
      canvas.deactivateAll().renderAll();
    }

    var iimageLoader = document.getElementById('iimageLoader');
    iimageLoader.addEventListener('change', handleImage, false);

    function handleImage(f) {
      var objects = canvas.getObjects();
      /* for (var i in objects) {
        objects[i].remove();
      } */
      var reader = new FileReader();
      reader.onload = function(event) {

        var fimg = new Image();
        fimg.onload = function() {
          var fimgInstance = new fabric.Image(fimg, {
            selectable: 1,
            width: 80,
            height: 50
          })
          canvas.add(fimgInstance);
          fimgInstance.center();
          /* var red = new fabric.Rect({ width: 80, height: 50, fill: 'red'})
          canvas.add(red);
          red.center(); */
          canvas.deactivateAll().renderAll();
        }
        fimg.src = event.target.result;
      }
      reader.readAsDataURL(f.target.files[0]);
    }

    img.src = event.target.result;

  }
  reader.readAsDataURL(e.target.files[0]);
}



var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);

function saveImage(e,f) {
  this.href = canvas.toDataURL({
    format: 'png',
    quality: 0.8
  });
  this.download = 'canvas.png'
}

我使用fabric.js，因为它更方便

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接