具体方法有两种  一种是 利用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. JsonResult类设置返回json的长度(工作笔记 json转化出错)

    public JsonResult PoundageReportSearch()         {    JsonResult jr = new JsonResult();        // 实例 ...

  2. BZOJ 2879: [Noi2012]美食节

    2879: [Noi2012]美食节 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1834  Solved: 969[Submit][Status] ...

  3. Android源码——Logger日志系统

    Android的Logger日志系统是基于内核中的Logger日志驱动程序实现的. 日志保存在内核空间中 缓冲区保存日志   分类方法:日志的类型  +   日志的输出量   日志类型:   main ...

  4. django的cookie和session以及内置信号、缓存

    cookie和session cookie和session的作用: cookie和session都记录了客户端的某种状态,用来跟踪用户访问网站的整个回话.两者最大的区别是cookie的信息是存放在浏览 ...

  5. Python学习总结 01 配置环境

    1 查看python的版本 ubuntu16.04 LTS系统下默认安装了python2.7.12 和python3.5.2, 她们在/usr/bin/下可以找到, 默认用python2.7.8 1) ...

  6. 【JavaScript】ArtTemplate个人的使用体验。

    据说ArtTemplate是腾讯的,感觉这东西真不错,使用方便,用起来很简单,哈哈.腾讯也不完全只是坑爹啊. ArtTemplate 使用是,正常引入js,这个自然不用说.这东西啥时候使用呢?我觉得这 ...

  7. js 去除字符串中间的空格

    function trims(str){ return str.replace(/[ ]/g,""); //去除字符串中间的空格 }

  8. 如何使用Linux命令行查看Linux服务器内存使用情况？

    一个服务器,最重要的资源之一就是内存,内存够不够用,是直接关系到系统性能的关键所在. 本文介绍如何查看Linux服务器内存使用情况, 1.free命令 free -m [root@localhost ...

  9. log4net位置与使用方法

    <log4net> <appender name="RollingLogFileAppender" type="log4net.Appender.Rol ...

  10. git误删文件找回方法/git版本回退方法

    使用git命令 git rm css/\*.css 我删掉了css文件夹下所有以.css结尾的文件,那么要怎样才能把文件找回来呢,下面说说方法,删掉其他的文件也是一样的方式找回. 第一步:使用git ...