具体方法有两种  一种是 利用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. iOS-RunLoop

    简单的说run loop是事件驱动的一个大循环,如下代码所示int main(int argc, char * argv[]) {     //程序一直运行状态     while (AppIsRun ...

  2. MATLAB的三维散点图

    MATLAB中三维散点图函数为scatter3(x,y,z) 三维火柴图为stem3(x,y,z)

  3. 高端大气上档次的fullPage.js

    简介 4月15日,网易邮箱升级到6.0版本,并发布了介绍页面,页面采用了时下非常流行的"全屏"效果,文字.图片再加上 CSS3 动画,让用户非常直观.清晰的了解6.0版本的功能及特 ...

  4. linux显示中文

    设置centos显示中文   怎么设置Linux系统中文语言,这是很多小伙伴在开始使用Linux的时候,都会遇到一个问题,就是终端输入命令回显的时候中文显示乱码.出现这个情况一般是由于没有安装中文语言 ...

  5. 浅谈Nginx负载均衡和F5的区别

    前言 笔者最近在负责某集团网站时,同时用到了Nginx与F5,如图所示,负载均衡器F5作为处理外界请求的第一道"墙",将请求分发到web服务器后,web服务器上的Nginx再进行处 ...

  6. jquery插件扩展的学习

    jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...

  7. hibernate学习二（HelloWorld）

    一.建立hibernate配置文件 在工程Hibernate_01_HelloWorld下的src上建立hibernate.cfg.xml,打开hibernate-release-4.3.11.Fin ...

  8. 移动开发框架剖析(二) Hammer专业的手势控制

    浏览器底层并没有给元素提供类似,单击,双击,滑动,拖动这些直接可以用的控制接口,一切的手势动作都只能通过模拟出来.移动端浏览器唯一给我们提供的就只是mousedown -> mousemove ...

  9. 图解TCP/IP→第2章基础知识

    ####TCP.IP背景**关键词:ARPANET,UNIX,分组交换技术,*ARPANET(阿帕网),也是全球互联网的鼻祖.阿帕网的成功也充分证明了基于分组交换技术的通信方法的可行性.*20世纪70 ...

  10. ASP.Net 打通服务器代码和前台界面的特殊符号

    1.<% %>用来绑定后台代码 如: < % ;i<;i++) { Reaponse.Write(i.ToString()); } %> 2.<%# %> 是 ...