Canvas转图片

在Web开发中，将HTML5的Canvas元素转换为图片是一个常见的需求。解决这一问题的核心方法是使用Canvas API中的toDataURL()或toBlob()方法。这两种方法都可以将Canvas的内容导出为图片格式，如PNG或JPEG。下面我们将几种实现思路和代码示例。

1. 使用toDataURL方法

toDataURL方法可以将Canvas内容转换为一个Base64编码的URL字符串，该字符串可以直接用作标签的src属性。下面是一个简单的例子：

javascript
// 获取canvas元素
var canvas = document.getElementById('myCanvas');
// 调用toDataURL方法，生成PNG格式的图片
var dataURL = canvas.toDataURL("image/png");</p>

<p>// 创建一个img元素，并设置其src为dataURL
var img = document.createElement("img");
img.src = dataURL;</p>

<p>// 将img元素添加到body中展示
document.body.appendChild(img);

2. 使用toBlob方法

与toDataURL不同，toBlob方法不会返回Base64编码的字符串，而是直接生成一个Blob对象，这在处理大尺寸图片时更加高效。以下是如何使用toBlob的方法：

javascript
var canvas = document.getElementById('myCanvas');
canvas.toBlob(function(blob) {
    var newImg = document.createElement("img"),
        url = URL.createObjectURL(blob);</p>

<pre><code>newImg.onload = function() {
    // 不再需要时释放URL对象
    URL.revokeObjectURL(url);
};

newImg.src = url;
document.body.appendChild(newImg);

}, "image/jpeg", 0.95); // 第二个参数为图片类型，第三个参数为质量（0-1）

3. 下载Canvas为图片文件

除了在页面上显示Canvas作为图片外，我们还可以让用户下载它。这里提供一个通过创建标签并利用toDataURL来实现下载的例子：

javascript
function downloadCanvas(link, fileName) {
    link.href = document.getElementById('myCanvas').toDataURL();
    link.download = fileName;
}</p>

<p>var link = document.createElement('a');
link.innerHTML = 'Download image';</p>

<p>document.body.appendChild(link);</p>

<p>link.addEventListener('click', function(e) {
    downloadCanvas(this, 'my-canvas-image.png');
}, false);