具体方法有两种  一种是 利用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. 在mysql 查询语句中将时间戳格式转化为年月日格式

    SELECT  FROM_UNIXTIME('时间戳的字段名称', '%Y-%m-%d %H:%i:%s')   FROM `表名` http://www.cnblogs.com/tdalcn/arc ...

  2. 史上最详细的linux网卡ifcfg-eth0配置详解

    通过查资料与工作中的进行一下总结: DEVICE="eth1"   网卡名称NM_CONTROLLED="yes"      network mamager的参 ...

  3. django数据库操作和中间件

    数据库配置 django的数据库相关表配置在models.py文件中,数据库的连接相关信息配置在settings.py中 models.py相关相关参数配置 from django.db import ...

  4. php+swoole+websocket

    //创建websocket服务器对象,监听0.0.0.0:9502端口 $ws = new swoole_websocket_server("0.0.0.0", 9502); // ...

  5. docker develop django

    $ docker pull django $ docker run -it -v $(pwd):/usr/src/app -p 8000:8000 django /bin/bash

  6. BZOJ3879: SvT

    后缀数组裸题,每次的查询单调栈扫一遍就完了.为什么要写虚后缀树= =后缀数组不是自带虚树的结构么= = #include<cstdio> #include<algorithm> ...

  7. C3P0连接池配置和实现详解

    一.配置 <c3p0-config> <default-config> <!--当连接池中的连接耗尽的时候c3p0一次同时获取的连接数.Default: 3 --> ...

  8. css3 圆角

    -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ bo ...

  9. Spring MVC学习笔记——引入静态文件

    1.在user-servlet.xml中加入以下代码,才能使得对静态文件的请求不被Controller捕获,而映射到一个固定的地址 <!-- 将静态文件指定到某个特殊的文件夹中统一处理 --&g ...

  10. MySQL的if，case语句使用总结

    原文地址: http://outofmemory.cn/code-snippet/1149/MySQL-if-case-statement-usage-summary