用JavaScript实现HTML5 Canvas图像数据与图片之间的转换
5星
- 浏览量: 0
- 大小:None
- 文件类型：None
简介：
本文介绍了如何使用JavaScript在HTML5 Canvas上进行图像数据与图片文件之间的相互转换的技术和方法。
本段落将介绍如何使用JavaScript把一张图片拷贝到canvas里，并且展示如何从画布保存内容为图片格式。
首先，要讲的是怎样利用`drawImage()`方法将图片放入canvas中：
```javascript
// 将图像转换成canvas元素; 返回新的canvas元素
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`参数表示画布上的坐标点，图片将被放置在这个位置。
接下来是把canvas内容保存成图像格式的方法：
```javascript
// 将canvas数据转换为图片格式
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL(image/png);
return image;
}
```
以上代码段中，`toDataURL()`方法用于获取画布上指定区域的图像表示，并返回一个包含URI的数据字符串。
全部评论 (0)
