具体方法有两种  一种是 利用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 保存图片到本地的更多相关文章

  1. JS/HTML 保存图片到本地：HTML <a> download 属性

    JS如何保存图片到本地呢?自己百度一下吧! 这里想要说的是,可以利用 HTML 的 <a> 标签 来是实现保存图片到本地的功能,参考代码如下: <a href="http: ...

  2. js+Canvas 利用js 实现浏览器保存图片到本地

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 原生js 保存图片到本地

    <template> <div> <!--创建一个cavas 用来存放图片--> <canvas id="cavasimg" width= ...

  4. Android笔记之使用ImageView加载网络图片以及保存图片到本地并更新图库

    ImageView显示网络图片 findViewById(R.id.btnLoad).setOnClickListener(new View.OnClickListener() { @Override ...

  5. 微信小程序点击保存图片到本地相册——踩坑

    在微信小程序中要保存图片到本地相册,需要获取相册权限. 总之整个功能实现下来需要如下几个小程序的API:wx.getSetting,wx.authorize,wx.openSetting,wx.dow ...

  6. flutter 保存图片到本地

    f'lutter 图片的保存 分为俩步: 1.开启存储图片权限开启权限需要用到permission_handler pubspec 添加 permission_handler: ^3.0.1下载包就可 ...

  7. Android学习笔记进阶18 之画图并保存图片到本地

    1.首先创建一个Bitmap图片,并指定大小:   2.在该图片上创建一个新的画布Canvas,然后在画布上绘制,并保存即可:   3.需要保存的目录File,注意如果写的目录如“/sdcard/so ...

  8. Android学习笔记进阶18之画图并保存图片到本地

    1.首先创建一个Bitmap图片,并指定大小:   2.在该图片上创建一个新的画布Canvas,然后在画布上绘制,并保存即可:   3.需要保存的目录File,注意如果写的目录如“/sdcard/so ...

  9. 在sklearn上读取人脸数据集保存图片到本地

    程序如下: # -*- coding: utf-8 -*- """ Created on Sat Oct 31 17:36:56 2015 ""&qu ...

随机推荐

  1. JS控制，返回上一页之后强行刷新一次

    网站建设过程中,提交页面后我们经常要用到window.history.go(-1)返回上一页,因为页面的缓存功能,我们只能返回上次操作的页面,但在删除等操作中,我们希望实时看到删除项目后的页面,这就要 ...

  2. linux文件文件夹递归监控

    引言 今年(2016)年初来到A公司了,刚入职的时候比较缺前端fe,就过来顶了三个月,这段时间学到了好多前端开发的知识,这些都是题外话了.期间接触了一个很好用的前端自动化部署工具 -- fis,其中有 ...

  3. 偷懒小工具 - SSO单点登录通用类（可跨域）

    写在前面的话 上次发布过一篇同样标题的文章.但是因为跨域方面做得不太理想.我进行了修改,并重新分享给大家. 如果这篇文章对您有所帮助,请您点击一下推荐.以便有动力分享出更多的"偷懒小工具&q ...

  4. pandas read table

    http://pandas.pydata.org/pandas-docs/stable/10min.html import pandas as pd res = pd.read_table(" ...

  5. angular2学习地址

    http://www.hubwiz.com/course/5599d367a164dd0d75929c76/ http://learnangular2.com/inputs/ https://www. ...

  6. Mac安装mysql

    ### 第一步 安装后一定要记住初始密码 ### 第二步 打开终端 cd /usr/local/mysql/bin ./mysql -u root -p #输入初始密码 set password = ...

  7. 前端React开发入门笔记

    什么是React React是一个JavaScript库,是由FaceBook和Instagram开发的,主要用于用户创建图形化界面. Hello world <!DOCTYPE html> ...

  8. 多Form界面控件状态变化问题分析

    假定有frmA,frmB,frmC三个界面,当frmA中触发显示frmC与frmB触发显示frmC时显示界面不同,或者让frmC上的某个按钮不可用,此时应该在如何来控制frmC的显示.是采用在frmC ...

  9. Find and delete duplicate files

    作用:查找指定目录(一个或多个)及子目录下的所有重复文件,分组列出,并可手动选择或自动随机删除多余重复文件,每组重复文件仅保留一份.(支持文件名有空格,例如:"file  name" ...

  10. REDHAT一总复习1 记录systemd日志条目 rsyslogd配置记录日志指令

    显示9:05:00 到9:15:00 之间在/home/student/systemdreview.txt 文件中记录所有systemd日志条目 # echo "journalctl --s ...