Question: download pictures through a tag, only Google and Firefox support it

When downloading pictures through iframe, the names of pictures cannot be modified.

Solution:

1. Because the image address is cross domain, it must be converted to base64 data stream first

2. Then convert base64 to blob object

3. Then determine the type of browser and choose different ways to download the blob file stream to the local

Conversion to base64

convertUrlToBase64(url) {
    return new Promise(function(resolve, reject) {
        var img = new Image();
        img.crossOrigin = "Anonymous";
        img.src = url;
        img.onload = function() {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var ext = img.src
            .substring(img.src.lastIndexOf(".") + 1)
            .toLowerCase();
            var dataURL = canvas.toDataURL("image/" + ext);
            var base64 = {
                dataURL: dataURL,
                type: "image/" + ext,
                ext: ext
            };
            resolve(base64);
        };
    });
},

Convert to blob object

convertBase64UrlToBlob(base64) {
    var parts = base64.dataURL.split(";base64,");
    var contentType = parts[0].split(":")[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;
    var uInt8Array = new Uint8Array(rawLength);
    for (var i = 0; i < rawLength; i++) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], { type: contentType });
},

Determine the type of browser

myBrowser() {
    var userAgent = navigator.userAgent; //Get the userAgent string of the browser
    if (userAgent.indexOf("OPR") > -1) {
        return "Opera";
    } //Judge whether Opera browser OPR/43.0.2442.991
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //Determine whether Firefox browser is Firefox/51.0
    if (userAgent.indexOf("Trident") > -1) {
        return "IE";
    } //Judge whether Internet Explorer Trident/7.0; rv:11.0
    if (userAgent.indexOf("Edge") > -1) {
        return "Edge";
    } //Judge whether Edge browser Edge/14.14393
    if (userAgent.indexOf("Chrome") > -1) {
        return "Chrome";
    } // Chrome/56.0.2924.87
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //Determine whether the safari browser AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2
},

Pass the obtained address to the above method, and then judge the browser type,

Choose a compatible method to download blob file stream

//Picture format and PDF
this.convertUrlToBase64(url).then(function(base64) {
    // Picture to base64
    var blob = that.convertBase64UrlToBlob(base64); // Convert to blob object
    // download
    if (that.myBrowser() == "IE") {
        window.navigator.msSaveBlob(blob, name + ".jpg");
    } else if (that.myBrowser() == "FF") {
        window.location.href = url;
    } else {
        var a = document.createElement("a");
        a.download = name;
        a.href = URL.createObjectURL(blob);
        a.click();
    }
});