https://blog.csdn.net/qq_42076140/article/details/82113622    原文地址

<a href="javascript:download();" >点击下载图片</a>
 //下载图片
function download() {
var imgData = $("#showPayPic").prop('src');//这里放需要下载的base64
downloadFile(new Date().getTime()+".png", imgData);
}
//下载
function downloadFile(fileName, content) {
var aLink = document.createElement('a');
var blob = this.base64ToBlob(content); //new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
// aLink.dispatchEvent(evt);
aLink.click()
}
//base64转blob
function base64ToBlob(code) {
var parts = code.split(';base64,');
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}

浏览器下载img标签Base64图片的更多相关文章

  1. java版模拟浏览器下载百度动漫图片到本地。

    package javaNet.Instance.ImageDownload; import java.io.BufferedReader; import java.io.File; import j ...

  2. base64图片在各种浏览器的兼容性处理

    IE浏览器目前最高的版本是v11,而微软放弃了IE,转向新的浏览器开发,并取名为Edge.base64图片在IE9及以后的图片均能显示没有问题,而Firefox, Chrome, Safari等非IE ...

  3. 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

  4. Nginx中防盗链(下载防盗链和图片防盗链)操作记录

    日常运维工作中,设置防盗链的需求会经常碰到,这也是优化网站的一个必要措施.今天在此介绍Nginx中设置下载防盗链和图片防盗链的操作~ 一.Nginx中下载防盗链的操作记录对于一些站点上的下载操作,有很 ...

  5. Nginx中防盗链(下载防盗链和图片防盗链)及图片访问地址操作记录

    日常运维工作中,设置防盗链的需求会经常碰到,这也是优化网站的一个必要措施.今天在此介绍Nginx中设置下载防盗链和图片防盗链的操作~ 一.Nginx中下载防盗链的操作记录对于一些站点上的下载操作,有很 ...

  6. Base64图片编码原理,base64图片工具介绍,图片在线转换Base64

    Base64图片编码原理,base64图片工具介绍,图片在线转换Base64 DataURI 允许在HTML文档中嵌入小文件,可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码,减少  ...

  7. Ajax清除浏览器js、css、图片缓存的方法

    做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. ...

  8. Base64 图片转换工具

    以前在写asp的后台的时候,有一个上传功能是必须的,那时候进行的图片预览(未上传前)其实就是获取本地的图片路径来显示图片,但是随着HTML5的出现,可以把图片通过编码来实现预览. 在雅虎的36条速度优 ...

  9. [TFRecord格式数据]利用TFRecords存储与读取带标签的图片

    利用TFRecords存储与读取带标签的图片 原创文章,转载请注明出处~ 觉得有用的话,欢迎一起讨论相互学习~Follow Me TFRecords其实是一种二进制文件,虽然它不如其他格式好理解,但是 ...

随机推荐

  1. mysql中如何查看某个数据库或表占用的磁盘空间

    查整个库的状态:select concat(truncate(sum(data_length)/1024/1024,2),'MB') as data_size,          concat(tru ...

  2. POJ-1062 昂贵的聘礼 有限制的最短路

    题目链接:https://cn.vjudge.net/problem/POJ-1062 题意 虽然是中文题,还是简单复述一下吧 我们想要酋长的女儿作为老婆.作为交换,酋长想要点钱. 酋长提出可以用其他 ...

  3. session 超时跳转登陆页面

    /** * session超时跳转登陆页面 * @author zhangdong * 2017年10月24日 */ @Aspect @Component public class SessionTi ...

  4. vi 学习记录

    i 光标所在前插入 I 光标所在行的第一个非空字符前进入输入模式 a 光标所在后插入 A 光标所在最后插入 o 光标所在列下新增一列并进入输入模式 O 光标所在列上新增一列并进入输入模式 退出 :q, ...

  5. Mysql学习总结(22)——Mysql数据库中制作千万级测试表

    前言: 为了方便测试性能.分表等工作,就需要先建立一张比较大的数据表.我这里准备先建一张千万记录用户表. 步骤: 1 创建数据表(MYISAM方式存储插入速度比innodb方式快很多) 数据表描述 数 ...

  6. CodeForces 445E DZY Loves Colors

    DZY Loves Colors Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeForces ...

  7. Linux split 命令用法详解 - 切割文件[转]

    功能说明:切割文件.语 法:split [--help][--version][-<行数>][-b <字节>][-C <字节>][-l <行数>][要切 ...

  8. Cannot find the class file for javax.servlet.ServletContext.

    当eclipse中新导入的Java Project的时候.往往会碰到各种各样的问题,以下是个典型的问题: Cannot find the class file for javax.servlet.Se ...

  9. QtWebkit里RenderLayer树的绘制具体流程分析

           更新:RenderLayer树的绘制对RenderObject的绘制.同一时候补足绘制阶段的描写叙述.        QtWebkit里,QWebView,QWebPage和QWebFr ...

  10. BZOJ4259: 残缺的字符串 & BZOJ4503: 两个串

    [传送门:BZOJ4259&BZOJ4503] 简要题意: 给出两个字符串,第一个串长度为m,第二个串长度为n,字符串中如果有*字符,则代表当前位置可以匹配任何字符 求出第一个字符串在第二个字 ...