HTML本地保存图片

顺晟科技

2022-09-15 21:53:01

161

具体方法有两种一种是利用canvas的 toDataUrl 和Html5 里面的 <a>标签里面的 Download 属性

虽然 Download 的兼容性不怎么样但是在文章后面给大家说说怎么兼容IE

　　如果你用cnavas 画了一张很是完美的照片你想着把它保存下来

你点了图片右击 =》图片另存为（还可以改名字）

以上操作的确是没毛病对吧但是总感觉有点不爽是吧要的就是一单击就可以下载

HTML 部分：

    <!--创建一个cavas  用来存放图片-->
        <canvas  id="cavasimg" width="607" height="367"  ></canvas> 
        
<!--        声明一个按钮  用来触发下载图片到本地-->
        <input type="button" id="btnsavaImg" value="保存图片到本地" onclick="Download()"/>

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);
        };

插入效果吧：

接下来就要用 <a>标签了

<a  href="img/0dd7912397dda144b4b30b41b3b7d0a20df4868e.jpg" download="lumia.jpg">
            <img src="img/0dd7912397dda144b4b30b41b3b7d0a20df4868e.jpg" />
        </a>

这就不用写js方法咯但是会有不兼容的问题当前好像只支持chrome 和 firefox对于IE 该怎么办呢？

那就需要在你页面的 <head></head> 部分引入这个js文件了

<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

务必请放在 head里面因为要让浏览器在解析头部后再去解析<body> 那时候就能让IE 支持该属性了。

上一篇：将html另存为图片下一篇：在微信中实现HTML页面保存成图片