具体方法有两种  一种是 利用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. Ubuntu中配置Java环境变量时，出现command not found问题解决记录

    百度出Ubuntu中配置Java环境变量时,在利用sudo gedit /etc/profile 对profile编辑后, 在terminal中输入 sudo source /etc/profile, ...

  2. 使用vlc进行二次开发做自己的播放器

    可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 web网页中使用vlc插件播放相机rtsp流视频 使用 https://github.com/ZeBobo5/Vlc.Do ...

  3. [Java] JSP笔记 - 自定义标签

    自定义标签的创建步骤: 自定义标签的四大功能: 自定义标签的类结构: 在 1.0 中呢, 可以将 <body-content> 的值设置为 JSP, 2.0中则不允许在自定义标签体中出现j ...

  4. javascript闭包

    关于闭包的介绍,推荐两篇文章: 廖雪峰javascript教程-闭包: http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a ...

  5. 再谈 Mysql解决中文乱码

    一是要把数据库服务器的字符集设置为 utf8. 数据库的字符集会跟服务器的字符集一起变化, 也会变成 utf8: 在/etc/my.cnf中, 的 [mysqld]中, 设置 character-se ...

  6. [译]flexbox全揭秘

    原文:http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 弹性布局(弹性盒子,现今仍是w3c的候选推荐),目标在于,对于一个容器中的各个项目块 ...

  7. Linux2.6.11版本：classic RCU的实现

    转载自:http://www.wowotech.net/kernel_synchronization/linux2-6-11-RCU.html 一.前言 无论你愿意或者不愿意,linux kernel ...

  8. 等价类划分方法的应用（jsp）

    [问题描述] 在三个文本框中输入字符串,要求均为1到6个英文字符或数字,按submit提交. [划分等价类] 条件1: 字符合法; 条件2: 输入1长度合法; 条件3: 输入2长度合法: 条件4: 输 ...

  9. FFmpeg和X264的交叉编译环境

    在下载好了FFmpeg和X264的源码包之后,在Linux下进行安装的基本流程就是切换到其源码的根目录,然后以此执行以下命令.基本上所有的开源源码包的默认编译安装都是这三步. ./configure ...

  10. 关于GridView中控件的问题

    最近做项目报表时,会遇到在Gridview中有一些控件,报表中也会有更新.删除等一系列的操作,但往往会遇到一些控件取值取不到或者找不到控件得问题,通过网上查阅资料对其中的一些做一总结: 前台代码如下: ...