Javascript getImageData转换为toDataURL HTML5
在HTML5中,有没有办法将图像数据从getImageData转换为toDataURLJavascript getImageData转换为toDataURL HTML5,javascript,html,canvas,Javascript,Html,Canvas,在HTML5中,有没有办法将图像数据从getImageData转换为toDataURL var pixelData = ctx.getImageData(x - (lineWidth/2), y - (lineWidth/2), lineWidth, lineWidth); x和y是鼠标指针在画布上的位置,我正在创建绘图应用程序,从现有画布获取图像数据,并将其(复制)放到新画布中。从该图像数据中,我想使用createPattern创建图案。有什么想法吗?请帮助我您不需要getImageData
var pixelData = ctx.getImageData(x - (lineWidth/2), y - (lineWidth/2), lineWidth, lineWidth);
x和y是鼠标指针在画布上的位置,我正在创建绘图应用程序,从现有画布获取图像数据,并将其(复制)放到新画布中。从该图像数据中,我想使用
createPattern
创建图案。有什么想法吗?请帮助我您不需要getImageData将canvas1的一部分复制到canvas2
(getImageData速度较慢)
只需创建一个临时画布,并将画布1的图像部分绘制到临时画布上
然后使用临时画布创建用于画布2的图案
var pattern=ctx2.createPattern(patternCanvas,'repeat');
如果所有画布1都用作图案,则更简单。那么就这样做:
var pattern=ctx2.createPattern(canvas1,'repeat');
示例代码和演示:
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);
}