如何從HTML5畫布使用JavaScript檢索原始位圖數據？

我想知道如何從HTML5畫布中提取原始數據作爲原始位圖像素數據並將其存儲在變量中。如何從HTML5畫布使用JavaScript檢索原始位圖數據？

到目前爲止，我已經設置我的圖像HTML5畫布它： https://jsfiddle.net/t21mjh5L/1/

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var img = document.getElementById("myimg"); 
ctx.drawImage(img,0,0); 
var bitmapData; 
//retrieve image data as raw bitmap

來源

2016-01-06 user1869257

你見過[這個老問題]（http://stackoverflow.com/questions/667045/getpixel-從HTML的畫布）？ – Pointy

你可以嘗試得到這樣的位圖數據：

var myImageData = ctx.getImageData(left, top, width, height).data;

有關獲取圖像數據

更多信息可以發現 here

來源

2016-01-06 19:00:36 thisisbb

謝謝。你的回答幫助我找到了這篇文章，它幫助我得到了我想要的東西。 https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/ – user1869257

此外，如果任何人有興趣，這是如何獲得原始jpeg數據：\t var jpegRawData = canvas .toDataURL（「image/jpeg」，1.0）.replace（「data：image/jpeg; base64，」，「」）; – user1869257

如何從HTML5畫布使用JavaScript檢索原始位圖數據？

回答

相關問題