支付宝扫码
领取余额宝体验金

轻云博客 > Jquery+Ajax学习 > Jquery保存图片到本地

Jquery保存图片到本地

作者:Aisencici / 日期:2019-3-8 9:57:00 / 分类:Jquery+Ajax学习 / 浏览:145

具体方法有两种  一种是 利用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 支持该属性了。




本文标签:Jquery保存图片到本地
From:
分享到: