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 element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 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
PHP动态变静态原理
2006/11/25 PHP
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
使用php清除bom示例
2014/03/03 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
js实现无缝滚动图
2017/02/22 Javascript
javascript实现下雨效果
2017/03/27 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python中is与==判断的区别
2017/03/28 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
中科软笔试题和面试题
2014/10/07 面试题
农村婚礼证婚词
2014/01/10 职场文书
九年级家长会邀请函
2014/01/15 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
CAD实训总结范文
2015/08/03 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
HAM-2000摩机图
2021/04/22 无线电
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
分享几个实用的CSS代码块
2022/06/10 HTML / CSS