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中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 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
web方式ftp
2006/10/09 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
PHP比你想象的好得多
2014/11/27 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
php json转换相关知识(小结)
2018/12/21 PHP
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python元字符的用法实例解析
2018/01/17 Python
Python线程创建和终止实例代码
2018/01/20 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python enumerate内置库用法解析
2020/02/24 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
最热门的自我评价
2013/12/30 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript