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