vue 通过base64实现图片下载功能


Posted in Vue.js onDecember 19, 2020

1. 使用场景

当我们处理图片下载功能的时候,如果本地的图片,那么是可以通过canvas获得图片的base64的,方法如下。但是如果图片的url存在跨域问题的话,下面的方法将行不通,这时候我们可以另辟蹊径,将后台的同学,将图片以base64的形式进行返回。

function getBase64(url){
  //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
  var Img = new Image(),
    dataURL='';
  Img.src=url;
  Img.onload=function(){ //要先确保图片完整获取到,这是个异步事件
    var canvas = document.createElement("canvas"), //创建canvas元素
      width=Img.width, //确保canvas的尺寸和图片一样
      height=Img.height;
    canvas.width=width;
    canvas.height=height;
    canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
    dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
  };
}

2. 处理base64,进行下载

处理base64的时候有两点要注意,一个是对ie浏览器的处理,一个是对火狐浏览器的处理

2-1. 我们首先直接处理base64(基于vue)

1.由于后台返回的是纯base64,如果要完成图片的下载功能,必须加上一个前缀

<template>
 <a
  :href="prefixBase64 + qrBase64" rel="external nofollow" rel="external nofollow" 
  download="qrcode.png"
  class="qrcode"
 >
  <img src="static/img/load.png">
 </a>
</template>
 
<script>
 ...
 data () {
  return {
   qrBase64: '', // 二维码对应的base64(在方法里面进行获取)
   prefixBase64: 'data:image/png;base64,', // base64前缀
  }
 }
 ...
</script>

2.采用这种方式可以很好的支持chrome、Firefox、opera、Safari,但是不支持ie,所以我们下面单独处理ie浏览器

2-2. 处理ie浏览器

1.修改代码如下

<template>
 <a
  @click.stop.prevent="handleDownloadQrIMg"
  class="qrcode"
 >
  <img src="static/img/load.png">
 </a>
</template>
<script>
export default {
 methods: {
  // 点击下载图片
  handleDownloadQrIMg() {
   // 这里是获取到的图片base64编码,这里只是个例子哈,要自行编码图片替换这里才能测试看到效果
   const imgUrl = this.prefixBase64 + this.qrBase64;
   // 如果浏览器支持msSaveOrOpenBlob方法(也就是使用IE浏览器的时候),那么调用该方法去下载图片
   if (window.navigator.msSaveOrOpenBlob) {
    let bstr = atob(imgUrl.split(",")[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
     u8arr[n] = bstr.charCodeAt(n);
    }
    let blob = new Blob([u8arr]);
    window.navigator.msSaveOrOpenBlob(blob, "chart-download" + "." + "png");
   } else {
    // 这里就按照chrome等新版浏览器来处理
    let a = document.createElement("a");
    a.href = imgUrl;
    a.setAttribute("download", "chart-download");
    a.click();
   }
  }
 }
};
</script>

2.ok,ie的问题解决了,但是火狐的又不行了

2-3. 兼容方法

1.结合上面两种检测方法,我们只要可以判断浏览器是火狐,然后单独处理就可以实现我们的兼容性了

<template>
 <div>
  <a
   v-if="!isFirefox"
   @click.stop.prevent="handleDownloadQrIMg"
   class="qrcode"
  >
   <img src="static/img/load.png">
  </a>
  <a
   v-if="isFirefox"
   :href="prefixBase64 + qrBase64" rel="external nofollow" rel="external nofollow" 
   download="qrcode.png"
   class="qrcode"
  >
   <img src="static/img/load.png">
  </a>
 
 </div>
 
</template>
 
<script>
export default {
 data() {
  return {
   qrBase64: "", // 二维码对应的base64(在方法里面进行获取)
   prefixBase64: "data:image/png;base64,", // base64前缀
   isFirefox: false
  };
 },
 mounted() {
  // 判断浏览器是否是火狐
  if (navigator.userAgent.indexOf("Firefox") > 0) {
   this.isFirefox = true;
  }
 },
 methods: {
  // 点击下载图片
  handleDownloadQrIMg() {
   // 这里是获取到的图片base64编码,这里只是个例子哈,要自行编码图片替换这里才能测试看到效果
   const imgUrl = this.prefixBase64 + this.qrBase64;
   // 如果浏览器支持msSaveOrOpenBlob方法(也就是使用IE浏览器的时候),那么调用该方法去下载图片
   if (window.navigator.msSaveOrOpenBlob) {
    let bstr = atob(imgUrl.split(",")[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
     u8arr[n] = bstr.charCodeAt(n);
    }
    let blob = new Blob([u8arr]);
    window.navigator.msSaveOrOpenBlob(blob, "chart-download" + "." + "png");
   } else {
    // 这里就按照chrome等新版浏览器来处理
    let a = document.createElement("a");
    a.href = imgUrl;
    a.setAttribute("download", "chart-download");
    a.click();
   }
  }
 }
};
</script>

以上就是vue 通过base64实现图片下载功能的详细内容,更多关于vue 图片下载的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue组件生命周期运行原理解析
Nov 25 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
Vue中computed和watch有哪些区别
Dec 19 #Vue.js
Vue与React的区别和优势对比
Dec 18 #Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 #Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 #Vue.js
vue 数据操作相关总结
Dec 17 #Vue.js
Vue 组件注册全解析
Dec 17 #Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 #Vue.js
You might like
提升PHP速度全攻略
2006/10/09 PHP
PHP中常用数组处理方法实例分析
2008/08/30 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
Yii框架安装简明教程
2020/05/15 PHP
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python基于twisted实现简单的web服务器
2014/09/29 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python excel转换csv代码实例
2019/08/26 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
UDP协议功能
2013/01/06 面试题
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
公司营业员的自我评价
2014/03/04 职场文书
新年联欢会主持词
2014/03/27 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
个人整改措施书面材料
2014/10/24 职场文书
实习科室评语
2015/01/04 职场文书
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers