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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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
golang与PHP输出excel示例
2016/07/22 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
js实现简单进度条效果
2020/03/25 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
使用tensorflow实现线性svm
2018/09/07 Python
详解Python字符串切片
2019/05/20 Python
Python pandas用法最全整理
2019/08/04 Python
Python中if有多个条件处理方法
2020/02/26 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
python IDLE添加行号显示教程
2020/04/25 Python
python递归函数用法详解
2020/10/26 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
红领巾心向党广播稿
2014/01/19 职场文书
单位活动策划方案
2014/08/17 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python