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中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue实现登录功能
Dec 31 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
php fckeditor 调用的函数
2009/06/21 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
js中数组Array的一些常用方法总结
2013/08/12 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
python实现计算倒数的方法
2015/07/11 Python
Python中装饰器高级用法详解
2017/12/25 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
新闻专业本科生的自我评价分享
2013/11/20 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
思想作风建设心得体会
2014/10/22 职场文书
信访稳定工作汇报
2014/10/27 职场文书
会计电算化实训报告
2014/11/04 职场文书
安全生产感想
2015/08/07 职场文书
如何写好闭幕词
2019/04/02 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server