不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。

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

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

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

绘制出来,还是这德行:

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

#web前端 #canvas 浏览(1604) 阅读全文 评论(10)

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,.....