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开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
PHP修改session_id示例代码
2014/01/08 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
python实现批量命名照片
2020/06/18 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
如何实现一个自定义类的序列化
2012/05/22 面试题
医学专业大学生求职的自我评价
2013/11/27 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
英语教学随笔感言
2014/02/20 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
小学安全教育主题班会
2015/08/12 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书