Canvas 转 Image

在JavaScript中，Canvas API可以直接与HTML5的Image对象交互。如果需要将Canvas上的内容转换成实际的图片（ImageData），通常有两种方法：

1. **getImageData() 和 drawImage()**：首先使用`getImageData()`方法从Canvas获取一个包含像素数据的ImageData对象，然后创建一个新的Image对象，将其src属性设置为ImageData对象转换后的data URL。例如：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 绘制一些内容...
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var imgElement = new Image();
imgElement.src = 'data:image/png;base64,' + window.btoa(imageData.data);

2. **toDataURL() 方法**：Canvas有一个内置的`toDataURL()`方法，可以直接将canvas内容转换为data URL，包括Base64编码的图像。示例如下：

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

这两种方法都可以实现Canvas内容到Image的转换，但需要注意的是，由于涉及到Base64编码，如果图片数据量较大，可能会增加页面的加载时间和带宽消耗。