将图片放入HTML5画布并存储为图片的一种方法。

本文主要介绍了在HTML5画布上，将图片保存到图片中的方法，特别是将图片存储为图片，这是一个非常实用的功能，需要的朋友可以参考一下。





使用Javaｓｃｒｉｐｔ将图片复制到画布中

把图片到画布上，我们使用canvas元素的DrawImage方法：

复制代码代码如下所示：

图像，以便转换画布；返回新的画布元素

功能convertimagetocanvas（图像）{

VaR的画布document.createelement（画布）；

canvas.width = image.width；

canvas.height = image.height；

canvas.getcontext（2D）。DrawImage（图像0, 0）；
返回画布；

}

0, 0个是画布上的坐标，图片将被复制到这个地方。

用javaｓｃｒｉｐｔ将画布保存为图片格式

如果画布上的工作已经完成，可以使用以下简单方法将画布数据转换为图片格式：

复制代码代码如下所示：

画布到一个图像转换

功能convertcanvastoimage（帆布）{

新图像（）；

image.src = canvas.todataurl（图像/格式）；

返回图像；

}

这个代码可以神奇地将画布转换成PNG格式！

将图片和画布之间的技术可能比你想象的要简单得多。