在HTML5Canvas中放入图片和保留为图片的办法--百分百源码网

在HTML5Canvas中放入图片和保留为图片的办法-

发布时间：09/01 来源：未知浏览：关键词：

这篇文章主要介绍了在HTML5Canvas中放入图片和保留为图片的办法,特殊是把图片内容保留为图片,是非常有用的功能,需要的伴侣可以参照下这篇文章主要介绍了在HTML5 Canvas中放入图片和保留为图片的办法,特殊是把图片内容保留为图片,是非常有用的功能,需要的伴侣可以参照下

运用JavaScript将图片拷贝进画布

要想将图片放入画布里，我们运用canvas元素的drawImage办法：

 // Converts image to canvas; returns new canvas element

  function convertImageToCanvas(image) {

  var canvas = document.createElement("canvas");

  canvas.width = image.width;

  canvas.height = image.height;

  canvas.getContext("2d").drawImage(image, 0, 0);
 return canvas;

  }

这里的0, 0参数画布上的坐标点，图片将会拷贝到这个地方。

用JavaScript将画布保留成图片格局

要是你的画布上的作品已经完成，你可以用下面简略的办法将canvas数据转换成图片格局：

// Converts canvas to an image

  function convertCanvasToImage(canvas) {

  var image = new Image();

  image.src = canvas.toDataURL("image/png");

  return image;

  }

这段代码就能奇异的将canvas改变成PNG格局！

这些在图片和画布之间转换的技术可能比你想象的要简略的多哦。

以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相干内容请关注百分百源码网！

打赏