怎么在vue中利用base64对图片进行下载

怎么在vue中利用base64对图片进行下载？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

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对图片进行下载问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。