js小方法+Canvas 利用js 实现浏览器保存图片到本地

很多时候会看到 ：

<input type="button" id="btnsavaImg" value="保存图片到本地" onclick="Download()"/>

这都是固定好的，但是如果你有一天需要动态的去添加方法 或者是根据条件的去绑定点击事件下面的方法呢？

需要调用js 的 元素.addEventListener(event, function,useCapture)

event:表示为操作事件 例如 click 不用加上 on

function : 上述事件要执行的 方法

userCapture :<可选 参数为 true/false>

function BindEventToButton(elemet,type,FunName)
{
if(elemet.addListener)
{
elemet.addListener(type,FunName,false);
}else  //加上它 是因为要兼容 IE
{
elemet.attachEvent("on"+type,FunName);
}
}

此处需要调用 这个方法的时候 就简单多了呀

//如果按钮已经存在于页面上 没有事件的话 我们就为它加上事件
var btnSaveImg=document.getElementById('xxxx');
BindEventToButton(btnsaveImg,"click",方法名); //不要加上括号

话说我想在页面加载完成之后加上一个按钮又该怎么办呢？

windows.onload=function(){
addbutton("button","憋说话 kiss me");
}
function  addbutton(type,value)
{
//创建 按钮
var btn=document.createElement("input");
btn.type=type;  //可填 button、checkbox、raduio
btn.value=value;
document.body.appendChild(btn);

}

当你玩Canvas 的时候 你会说怎么我的按钮出来了 偏偏Canvas 还是空白 效果没有出来呢？

其实你这时候就该想 是不是图片还没有加载完成，毕竟图片还是耗费资源一点

这时候就来个

<!-------- 前面的代码我不管 我是华丽的分割线-------------->
//等待img加载完成以后再来填充到Cavas里面去吧......
img.onload=function()
{
ctx.drawImage(img,x,y);
}
<!-------- 后面的代码我不管 我是华丽的分割线-------------->

自从有了canvas 妈妈再也不担心你的图片下载了 需要下载那张图片的时候

可以自信的说 右击==》 图片另存为 ==》选择位置不就好了？

当然开个玩笑 你可以这么做呀 当你知道 你所画的那个canvas 的id 事情不就解决了

不知道id 你也可以用js 找到那个canvas 然后再使用它的 toDataURL 就什么都解决掉了

如果你要保存到服务器上面去 显然这个方法就不适合你了 但是你也能在这里找到一些东西

比如：在获取到图片的各种信息之后 是不是应该做ajax 然后在到后台去做处理…

末尾附上一个地址 看看 别人是怎么实现保存的

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().getDate()+'.'+type;
//注意咯 由于图片下载的比较少 就直接用当前几号做的图片名字
savaFile(imgdata,filename);
};

哈哈 我想说一点 既然你都用了 Cnavas 那就说明 你必然用的是HTML5 对吧

H5里面的 标签里面是有一个 download 的属性的 。

<a href="imgAddress" download='filename'>
<img src="imgAddress">
</a>

接下来就可以点击图片 他就会自动下载咯 。。。。。。（无奈兼容性不是特别好  有啥办法可以解决这个问题呢？）

可以让IE支持 那就让你 的HTML页面的标签

需要呈现以上的样子 因为该js文件需要在IE解析标签之前就开始

最后加上一点canvas 里面常出的问题 想想就是那种你看着都觉得诡异的 getcontext() not a function()

你可能就要抱怨的说 W3C上面就是这么弄得 怎么到我这里就出错了？

其实你要做的不是责怪自己 而是想想是不是我的Canvas 的 id 是这么书写的 id=”canvas”

又或者说是 var dom=xx.getContext(‘2d’);呢？

纠其原因就是 浏览器解释不清楚了 它觉得自己把握不住 到底是 canvas 标签 还是canvas的id属性 。

能做的就是改掉 免得浏览器为难，你不让他为难 他也就不为难你了 。

如果 你不让他为难了 ，他却在为难你 ，这时候你就想想是不是自己为难自己了，要不先换换脑子待会在做？

附上 别人保存图片的方法 见 URL:http://www.open-open.com/lib/view/open1347980964802.html