具体方法有两种 一种是 利用canvas的 toDataUrl 和Html5 里面的 标签里面的 Download 属性
虽然 Download 的兼容性不怎么样 但是在文章后面给大家说说怎么兼容IE
如果你用cnavas 画了一张很是完美的照片 你想着把它保存下来
你点了图片 右击 =》图片另存为 （还可以改名字）
以上操作的确是 没毛病对吧 但是 总感觉有点不爽是吧 要的就是一单击就可以下载
HTML 部分：
JS部分：
function Download(){
//cavas 保存图片到本地 js 实现
//------------------------------------------------------------------------
//1.确定图片的类型 获取到的图片格式 data:image/Png;base64,......
var type ='png';//你想要什么图片格式 就选什么吧
var d=document.getElementById("cavasimg");
var imgdata=d.toDataURL(type);
//2.0 将mime-type改为image/octet-stream,强制让浏览器下载
var fixtype=function(type){
type=type.toLocaleLowerCase().replace(/jpg/i,'jpeg');
var r=type.match(/png|jpeg|bmp|gif/)[0];
return 'image/'+r;
};
imgdata=imgdata.replace(fixtype(type),'image/octet-stream');
//3.0 将图片保存到本地
var savaFile=function(data,filename)
{
var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href=data;
save_link.download=filename;
var event=document.createEvent('MouseEvents');
event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
save_link.dispatchEvent(event);
};
var filename=''+new Date().getSeconds()+'.'+type;
//我想用当前秒是可以解决重名的问题了 不行你就换成毫秒
savaFile(imgdata,filename);
};
===================================================
接下来就要用 标签了
这就不用写js方法咯 但是会有不兼容的问题 当前好像只支持chrome 和 firefox对于IE 该怎么办呢？
那就需要 在你页面的部分引入这个js文件了
务必请放在 head里面 因为要让浏览器在解析头部后再去解析那时候就能让IE 支持该属性了。