Web开发者助手 FeHelper

canvas的drawImage方法，不能直接将一张（多帧的）动态图绘制出来，而只能获取到其中的一帧。

比如一张动态图，绘制到canvas上以后，就成这德行了：

就算是直接把这张gif转换为datauri格式，再绘制到canvas上，还是不行。

绘制出来，还是这德行：

参考这里：http://www.baidufe.com/demo/canvasgif.html

1、从canvas中直接提取图片元数据

// 图片导出为 png 格式
var type = 'png';
var imgData = canvas.toDataURL(type);

上面的代码得到的数据格式为：data:image/png;base64,.....

2、将mime-type改为image/octet-stream，强制让浏览器直接download

/**
 * 获取mimeType
 * @param  {String} type the old mime-type
 * @return the new mime-type
 */
var _fixType = function(type) {
    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return 'image/' + r;
};
  
// 加工image data，替换mime type
imgData = imgData.replace(_fixType(type),'image/octet-stream');

上面这个代码得到的数据格式为：data:image/octet-stream;base64,.....