JS canvas实现图片显示

最新推荐文章于 2023-07-31 11:17:48 发布

原创最新推荐文章于 2023-07-31 11:17:48 发布 · 5.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#图片 #canvas #js #数据

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍两种使用HTML5 Canvas绘制图像的方法。第一种方法通过Image对象加载图片并绘制到Canvas上。第二种方法则直接利用ImageData对象及其包含的RGBA数据进行绘制。

实现不多说，直接贴代码

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