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!