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项目利用axios请求接口下载excel
Nov 17 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
js微信分享API
2020/10/11 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
小学教师自我鉴定
2013/11/07 职场文书
干部培训自我鉴定
2014/01/22 职场文书
八年级语文教学反思
2014/02/11 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
安全检查汇报材料
2014/12/26 职场文书
初中政教处工作总结
2015/08/12 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python