HTML5画布;图像裁剪和多个图像

HTML5 Canvas; Image clipping and multiple images

本文关键字：图像 裁剪 HTML5 画布      更新时间：2023-09-26

我是一个相当新的画布，我有一些问题。

我试图完成一个最终目标:在一个画布上显示两个图像;一个图像是背景，另一个图像被剪辑为PNG并显示在顶部。

我已经成功了一半，但我遇到了瓶颈，我不知道如何克服它。

我已经为它创建了一个jsFiddle在http://jsfiddle.net/jhp79yg9/

      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var sources = {
        img1: 'https://scontent-iad3-1.cdninstagram.com/hphotos-xaf1/t51.2885-15/11351598_1454928098145798_1274636321_n.jpg',
        img2: 'https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11379733_1139595366067106_273993739_n.jpg',
        mask: 'http://img12.deviantart.net/65e4/i/2013/003/6/6/png_floating_terrain_by_moonglowlilly-d5qb58m.png'
      };
      loadImages(sources, function(images) {
        context.drawImage(images.img2, 0, 0, 240, 240);
        
        context.drawImage(images.mask, 20, 95, 500, 349);
        context.globalCompositeOperation = 'source-in';
        context.drawImage(images.img1, 0, 0, 540, 540);
      });
<canvas id="canvas" width="540" height="540"></canvas>

在这个例子中，我把第一张图片的大小从540x540减小到140x140，这样我就可以判断它是否搞砸了。

它没有显示第二张图片，而是显示了两次'img1'变量，而不是显示'img2'。

有人能提供帮助吗?

我也看不出来，因为它渲染的是相同的图像，一个在前景，一个在背景。在那里的帮助也将是感激的(剪辑图像应该在前景)。

谢谢!

另一种方法是从当前内容中剪切出蒙版，然后在当前内容后面绘制背景:

loadImages(sources, function(images) {
    context.drawImage(images.img2, 0, 0, 540, 540);
    context.globalCompositeOperation = 'destination-out';
    context.drawImage(images.mask, 20, 95, 500, 349);
    context.globalCompositeOperation = 'destination-atop';
    context.drawImage(images.img1, 0, 0, 540, 540);
})
http://jsfiddle.net/jhp79yg9/6/

我不太清楚您的需求是什么，但我做了一些假设，希望能给您您所需要的

context.drawImage(images.img2, 100, 180, 350, 350);
context.globalCompositeOperation = 'destination-atop';
context.drawImage(images.mask, 100, 180, 350, 350);
context.drawImage(images.img1, 0, 0, 540, 540);
http://jsfiddle.net/jhp79yg9/5/

相关文章：