带有HTML5 canvas的putImageData的掩码？ [英] Mask for putImageData with HTML5 canvas?

问题描述

我想从现有的图片中取得不规则形状的部分，并使用HTML5画布在Javascript中将其呈现为新的图片。因此，只有多边形边界内的数据将被复制。我想出的方法包括：

1. 在新画布中绘制多边形。


2. clip


3. 使用 getImageData （矩形）


4. 使用 putImageData

将数据应用到新画布b
$ b

它没有工作，整个矩形（例如来自源外边界的东西）仍然出现。 此问题解释了原因：
规格说， putImageData 不会受剪切区域的影响。 Dang！





我也尝试绘制形状，设置 context.globalCompositeOperation =source-in使用 putImageData 。相同结果：未应用掩码。我怀疑也有类似的原因。





有关如何完成这个目标的任何建议吗？这里是我的工作进展中的基本代码，以防万一它不清楚我想做什么。 （不要太努力去调试这个，它是从使用了很多不在这里的功能的代码清理/提取，只是试图显示逻辑）。

  // coords是我想要的区域的多边形数据
 context = $（'canvas'）[0] .getContext（2d）; 
 context.save（）; 
 context.beginPath（）; 
 context.moveTo（coords [0]，coords [1]）; 
 for（i = 2; i  context.lineTo（coords [i]，coords [i + 1]）; 
} 
 //context.closePath（）; 
 context.clip（）; 
 
 $ img = $（'＃main_image'）; 
 copy_canvas = new_canvas（$ img）; // just create a new canvas matching dimensions of image 
 copy_ctx = copy.getContext（2d）; 
 
 tempImage = new Image（）; 
 tempImage.src = $ img.attr（src）; 
 copy_ctx.drawImage（tempImage，0,0，tempImage.width，tempImage.height）; 
 
 //为多边形返回数组x，y，x，y和t / l和b / r角
 corner = get_corners（coords）
 var data = copy_ctx。 getImageData（corners [0]，corners [1]，corners [2]，corners [3]）; 
 //context.globalCompositeOperation =source-in; 
 context.putImageData（data，0,0）; 
 context.restore（）; 
  




解决方案

不要使用 putImageData ，





只需使用document.createElement在内存画布中创建一个额外的 c $ c> drawImage（）和 globalCompositeOperation 函数（取决于您选择正确模式的顺序;





我这里有类似的东西 代码在这里（注意 CasparKleijne.Canvas.GFX.Composite 函数）




I want to take an irregularly shaped section from an existing image and render it as a new image in Javascript using HTML5 canvases. So, only the data inside the polygon boundary will be copied. The approach I came up with involved:

1. Draw the polygon in a new canvas.
2. Create a mask using clip
3. Copy the data from the original canvas using getImageData (a rectangle)
4. Apply the data to the new canvas using putImageData

It didn't work, the entire rectangle (e.g. the stuff from the source outside the boundary) is still appearing. This question explains why: "The spec says that putImageData will not be affected by clipping regions." Dang!

I also tried drawing the shape, setting context.globalCompositeOperation = "source-in", and then using putImageData. Same result: no mask applied. I suspect for a similar reason.

Any suggestions on how to accomplish this goal? Here's basic code for my work in progress, in case it's not clear what I'm trying to do. (Don't try too hard to debug this, it's cleaned up/extracted from code that uses a lot of functions that aren't here, just trying to show the logic).

 // coords is the polygon data for the area I want
   context = $('canvas')[0].getContext("2d");
   context.save();
   context.beginPath();
   context.moveTo(coords[0], coords[1]);
   for (i = 2; i < coords.length; i += 2) {
     context.lineTo(coords[i], coords[i + 1]);
   }
   //context.closePath();
   context.clip();

   $img = $('#main_image');
   copy_canvas = new_canvas($img); // just creates a new canvas matching dimensions of image
   copy_ctx = copy.getContext("2d");

   tempImage = new Image();
   tempImage.src = $img.attr("src");
   copy_ctx.drawImage(tempImage,0,0,tempImage.width,tempImage.height);

  // returns array x,y,x,y with t/l and b/r corners for a polygon
  corners = get_corners(coords)
  var data = copy_ctx.getImageData(corners[0],corners[1],corners[2],corners[3]);
  //context.globalCompositeOperation = "source-in";
  context.putImageData(data,0,0);
  context.restore();

解决方案

dont use putImageData,

just make an extra in memory canvas with document.createElement to create the mask and apply that with a drawImage() and the globalCompositeOperation function (depending on the order you need to pick the right mode;

I do something similar here the code is here (mind the CasparKleijne.Canvas.GFX.Composite function)

这篇关于带有HTML5 canvas的putImageData的掩码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！