HTML 保存图片到本地
2016-07-20 14:20
519 查看
具体方法有两种 一种是 利用canvas的 toDataUrl 和Html5 里面的 <a>标签里面的 Download 属性
虽然 Download 的兼容性不怎么样 但是在文章后面给大家说说怎么兼容IE
如果你用cnavas 画了一张很是完美的照片 你想着把它保存下来
你点了图片 右击 =》图片另存为 (还可以改名字)
以上操作的确是 没毛病对吧 但是 总感觉有点不爽是吧 要的就是一单击就可以下载
HTML 部分:
插入效果吧:
接下来就要用 <a>标签了
这就不用写js方法咯 但是会有不兼容的问题 当前好像只支持chrome 和 firefox对于IE 该怎么办呢?
那就需要 在你页面的 <head></head> 部分引入这个js文件了
务必请放在 head里面 因为要让浏览器在解析头部后再去解析<body> 那时候就能让IE 支持该属性了。
虽然 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 标签 链接
- html 标签 图片
- HTML编码与解码
- html 列表标签
- [HTML][服务器]状态码列表status
- ACM--解析HTML--HDOJ 1088--Write a simple HTML Browser--水
- 【Dongle】【HTML】标签总结(一)
- html和body之间空白解决
- 自定义html标签属性并获取
- [HTML]POST方法和GET方法
- 可拖动的进度条
- HTML学习笔记1.14—创建列表
- ie中提示框被遮挡
- as3 中 textfiled的htmltext 的常用属性
- html页面提交数据,利用servlet接收数据并写进xml中
- html dl dt dd标签元素语法结构与使用
- (三)html图像标记
- (二)html文档设置标记
- IE浏览器不同版本下的兼容性