JS canvas實現圖片顯示
阿新 • • 發佈:2019-02-08
實現不多說,直接貼程式碼
方式一:用Image來設定源資料為一張圖片。從而把圖片畫出來。
function setImage()
{
console.log("set Image");
var canvas = document.getElementById('m_canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = 'image.png';
image.onload=function(){
ctx.drawImage(image,10,10);
var imagedata = ctx.getImageData(50,50,400,400);
ctx.createImageData(imagedata);
}
}
方式二:利用ImageData來繪製,ImageData中填的是Uint8ClampedArray的RGBA資料。
//data為原始RGBA的資料,width ,height 為原始圖片寬和高
var m_data = Uint8ClampedArray.from(data);
var m_imageData = new ImageData(m_data,width,height);
var canvas = document.getElementById("canvas" );
canvas.width = m_videoInfo.dwWidth;
canvas.height = m_videoInfo.dwHeight;
canvas.getContext('2d').putImageData(m_imageData,0,0);