getImageData 转换为 toDataURL HTML5答案

【问题标题】：getImageData convert to toDataURL HTML5getImageData 转换为 toDataURL HTML5
【发布时间】：2014-06-06 07:11:27
【问题描述】：

有没有办法在 HTML5 中将图像数据从 getImageData 转换为 toDataURL？

var pixelData = ctx.getImageData(x - (lineWidth/2), y - (lineWidth/2), lineWidth, lineWidth);

x 和 y 是鼠标指针在画布上的位置，我正在创建绘图应用程序以从现有画布获取图像数据并将其（复制）到新画布中。从该图像数据中，我想用createPattern 创建图案。任何想法？请帮帮我

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

您不需要 getImageData 将 canvas1 的一部分复制到 canvas2 上。

（getImageData 很慢）

只需创建一个临时画布并将canvas1的drawImage部分绘制到临时画布上。

然后使用临时画布创建一个图案，供 canvas2 使用。

var pattern=ctx2.createPattern(patternCanvas,'repeat');

如果所有的canvas1都用作模式，那就更简单了。然后这样做：

var pattern=ctx2.createPattern(canvas1,'repeat');

示例代码和演示：http://jsfiddle.net/m1erickson/rKxn3/

var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");
var patternCanvas=document.createElement("canvas");
var patternCtx=patternCanvas.getContext("2d");

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";
function start(){

    ctx1.drawImage(img,0,0);

    patternCanvas.width=80;
    patternCanvas.height=47;
    patternCtx.drawImage(canvas1,0,0,80,47,0,0,80,47);

    var pattern=ctx2.createPattern(patternCanvas,'repeat');
    ctx2.fillStyle=pattern;
    ctx2.fillRect(0,0,canvas2.width,canvas2.height);

}

【讨论】：