vue realizes picture download function through base64

  • 2021-10-15 09:38:42
  • OfStack

1. Use scenarios

When we deal with the image download function, if the image is local, then the image can be obtained through canvas base64, the method is as follows. However, if there is a cross-domain problem in the url of the picture, the following method will not work. At this time, we can find another way to return the picture to the students in the background in the form of base64.


function getBase64(url){
  // Created by the constructor  img  Instance, in giving  src  Value, the picture will be downloaded immediately, compared with  createElement()  Create  <img>  Omit  append() Which avoids document redundancy and contamination 
  var Img = new Image(),
    dataURL='';
  Img.src=url;
  Img.onload=function(){ // To make sure that the picture is completely obtained, this is an asynchronous event 
    var canvas = document.createElement("canvas"), // Create canvas Element 
      width=Img.width, // Ensure canvas Size and picture of 1 Sample 
      height=Img.height;
    canvas.width=width;
    canvas.height=height;
    canvas.getContext("2d").drawImage(Img,0,0,width,height); // Draws the picture to the canvas Medium 
    dataURL=canvas.toDataURL('image/jpeg'); // Convert a picture to dataURL
  };
}

2. Process base64 for download

There are two points to note when processing base64, one is the processing of ie browser and the other is the processing of Firefox browser

2-1. We first deal directly with base64 (based on vue)

1. Because the background returns pure base64, if you want to complete the download function of pictures, you must add a prefix


<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: '', // 2 Dimension code corresponding base64 (Get inside the method) 
   prefixBase64: 'data:image/png;base64,', // base64 Prefix 
  }
 }
 ...
</script>

2. chrome, Firefox, opera and Safari are well supported in this way, but ie is not supported, so we will deal with ie browser separately below

2-2. Working with the ie browser

1. Modify the code as follows


<template>
 <a
  @click.stop.prevent="handleDownloadQrIMg"
  class="qrcode"
 >
  <img src="static/img/load.png">
 </a>
</template>
<script>
export default {
 methods: {
  //  Click to download the picture 
  handleDownloadQrIMg() {
   //  Here is the picture obtained base64 Code , Here is just an example, if you want to code your own pictures to replace them, you can test and see the effect 
   const imgUrl = this.prefixBase64 + this.qrBase64;
   //  If the browser supports msSaveOrOpenBlob Method (that is, using the IE Browser), then call this method to download the picture 
   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 {
    //  Here, according to chrome Wait for the new browser to deal with it 
    let a = document.createElement("a");
    a.href = imgUrl;
    a.setAttribute("download", "chart-download");
    a.click();
   }
  }
 }
};
</script>

2. The problem of ok and ie is solved, but Firefox's is not working again

2-3. Compatible methods

1. Combining the above two detection methods, we only need to judge that the browser is Firefox, and then we can achieve our compatibility by processing it separately


<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: "", // 2 Dimension code corresponding base64 (Get inside the method) 
   prefixBase64: "data:image/png;base64,", // base64 Prefix 
   isFirefox: false
  };
 },
 mounted() {
  //  Determine if the browser is Firefox 
  if (navigator.userAgent.indexOf("Firefox") > 0) {
   this.isFirefox = true;
  }
 },
 methods: {
  //  Click to download the picture 
  handleDownloadQrIMg() {
   //  Here is the picture obtained base64 Code , Here is just an example, if you want to code your own pictures to replace them, you can test and see the effect 
   const imgUrl = this.prefixBase64 + this.qrBase64;
   //  If the browser supports msSaveOrOpenBlob Method (that is, using the IE Browser), then call this method to download the picture 
   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 {
    //  Here, according to chrome Wait for the new browser to deal with it 
    let a = document.createElement("a");
    a.href = imgUrl;
    a.setAttribute("download", "chart-download");
    a.click();
   }
  }
 }
};
</script>

The above is vue through base64 to achieve the image download function details, more information about vue image download please pay attention to other related articles on this site!


Related articles: