![](/img/trans.png)
[英]Result of html5 Canvas getImageData or toDataURL - Which takes up more memory?
[英]getImageData convert to toDataURL HTML5
有沒有辦法在 HTML5 中將圖像數據從 getImageData 轉換為 toDataURL?
var pixelData = ctx.getImageData(x - (lineWidth/2), y - (lineWidth/2), lineWidth, lineWidth);
x 和 y 是鼠標指針在畫布上的位置,我正在創建繪圖應用程序以從現有畫布獲取圖像數據並將其(復制)放入新畫布中。 從該圖像數據我想用createPattern
創建模式。 任何的想法? 請幫我
您不需要 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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.