/**
* 根据图片生成画布,并利用a标签下载图片
* @param $image img对象
*/
function convertImageToCanvas($image) {
var canvas = document.createElement("canvas");
var ctx=canvas.getContext("2d");
var myImage = new Image();
myImage.src = $image.attr('src')
myImage.onload=function () {
canvas.width = $image.width();
canvas.height = $image.height();
ctx.drawImage(myImage, 0, 0); //将图片url转换成base64编码
var url = canvas.toDataURL('image/png');
console.log(url);
var downloadImg = $('#down').attr("href",url).attr("download",new Date().toTimeString()+".png"); //利用a标签下载图片,#down 是页面a标签
downloadImg[0].click();
}
myImage.onload();
}
参考:
https://stackoverflow.com/questions/33024630/html5-canvas-conversion-of-image-file-to-dataurl-throws-uncaught-typeerror
http://blog.csdn.net/fenglailea/article/details/56488096