JS canvas实现图片显示

来源：互联网发布：zcash n卡挖矿软件编辑：程序博客网时间：2024/06/10 21:58

实现不多说，直接贴代码

方式一：用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);

阅读全文

0 0