本文通过一个示例来介绍如何将canvas元素中的图像转换为jpg等格式的Blob对象。
示例页面的HTML 5代码部分如下所示。
<body onload="init();"><canvas id="canvas" width="400" height="300" /><a id="download" download="image.jpg">下载图像</a></body>
示例页面的script脚本代码部分如下所示。
<script type="text/javascript">function init(){ /*** 绘制canvas元素中的图像 ***/ var canvas = document.getElementById("canvas"); if (canvas == null) return false; var context = canvas.getContext('2d'); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); var n = 0; for(var i = 0; i < 10; i++) { context.beginPath(); context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true); context.closePath(); context.fillStyle = 'rgba(255, 0, 0, 0.25)'; context.fill(); } var type = 'image/jpeg'; //将canvas元素中的图像转变为DataURL var dataurl = canvas.toDataURL(type); //抽取DataURL中的数据部分，从Base64格式转换为二进制格式 var bin = atob(dataurl.split(',')[1]); //创建空的Uint8Array var buffer = new Uint8Array(bin.length); //将图像数据逐字节放入Uint8Array中 for (var i = 0; i < bin.length; i++) { buffer[i] = bin.charCodeAt(i); } //利用Uint8Array创建Blob对象 var blob = new Blob([buffer.buffer], {type: type}); var url = window.URL.createObjectURL(blob); document.getElementById("download").href=url;}</script> 在上述代码中，实现了将canvas元素的图像转换为jpg格式的Blob对象的处理。如果将type属性值修改为“image/png”，可以将图像转换为其他格式的Blob对象。如果使用window.URL.createObjectURL方法，则可以获取引用该图像的URL，代码如下所示。
var url = window.URL.createObjectURL(blob);
可以通过将某个超链接元素的href属性值设置为该URL的方法将图像下载，代码如下所示。
document.getElementById("download").href=url;如果要将canvas元素中的图像转换为DataURL，则必须使用canvas元素的toDataURL方法，在该方法中可以使用一个参数，用于指定图像格式，代码如下所示。
canvas.toDataURL('image/jpeg') 联系客服
