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()
            {
                (type,FunName,false);
            }else  //加上它 是因为要兼容 IE 
            {
                ("on"+type,FunName);
            }           
        }

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

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

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

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

}

当你玩Canvas 的时候你会说怎么我的按钮出来了偏偏Canvas 还是空白效果没有出来呢？
其实你这时候就该想是不是图片还没有加载完成，毕竟图片还是耗费资源一点

这时候就来个

<!-------- 前面的代码我不管 我是华丽的分割线-------------->
//等待img加载完成以后再来填充到Cavas里面去吧......
  =function()
  {
  (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=("cavasimg");
        var imgdata=(type);
        //2.0 将mime-type改为image/octet-stream,强制让浏览器下载
        var fixtype=function(type){
            type=().replace(/jpg/i,'jpeg');
            var r=(/png|jpeg|bmp|gif/)[0];
            return 'image/'+r;
        };
        imgdata=(fixtype(type),'image/octet-stream');
        //3.0 将图片保存到本地
        var savaFile=function(data,filename)
        {
            var save_link=('http:///1999/xhtml', 'a');
            save_link.href=data;
            save_link.download=filename;
            var event=('MouseEvents');
            ('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=(‘2d’);呢？
纠其原因就是浏览器解释不清楚了它觉得自己把握不住到底是 canvas 标签还是canvas的id属性。
能做的就是改掉免得浏览器为难，你不让他为难他也就不为难你了。
如果你不让他为难了，他却在为难你，这时候你就想想是不是自己为难自己了，要不先换换脑子待会在做？

附上别人保存图片的方法见 URL:/lib/view/

秒客网

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

相关文章