360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来，但是极速模式可以显示？

问题

最近遇到一个验证码出不来的问题，在360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来，效果如下：

这个验证码的代码元素如下，是一张图片，由接口提供的一个图片链接，返回的是文件流。

原因

我找了一个其他网址，发现在360极速浏览器以及360安全浏览器在兼容模式下验证码图片可以显示出来

这个验证码的代码元素如下，是一张 base64 的图片

于是我猜想是不是360极速浏览器以及360安全浏览器在兼容模式下需要base64的图片才行，于是我将上面改成base64的尝试一下。

解决

有了上面的猜想方案，下面来实践一下

添加 @/utils/blob.js 文件

import axios from "axios";
// blob二进制 to base64
function blobToDataURI(blob, callback) {
    let reader = new FileReader();
    reader.onload = function (e) {
        callback(e.target.result);
    }
    reader.readAsDataURL(blob);
}
// blob 二进制转 base64
export function blobToBase64(url, data, callback) {
    axios({
        method: "get",
        url, // 请求地址
        data, // 参数
        responseType: "blob", // 表明返回服务器返回的数据类型
    }).then(res => {
        let blob = new Blob([res.data], { type: "iamge/png" });
        console.log("blobToBase64---->", blob);
        blobToDataURI(blob, (res) => {
            console.log("res---->", res);
            callback(res);
        })
    }).catch(err => {
        console.log(err);
    });
}

调用该方法：

// blob转base64
import { blobToBase64 } from  "@/utils/blob.js";
blobToBase64(`/xxx/imgcode?r=${Math.random()}`, null, (res) => {
    this.codeSrc = res;
})

改完之后，就可以了。

360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来，但是极速模式可以显示？

问题

最近遇到一个验证码出不来的问题，在360极速浏览器以及360安全浏览器在兼容模式下验证码图片显示不来，效果如下：

这个验证码的代码元素如下，是一张图片，由接口提供的一个图片链接，返回的是文件流。

原因

我找了一个其他网址，发现在360极速浏览器以及360安全浏览器在兼容模式下验证码图片可以显示出来

这个验证码的代码元素如下，是一张 base64 的图片

于是我猜想是不是360极速浏览器以及360安全浏览器在兼容模式下需要base64的图片才行，于是我将上面改成base64的尝试一下。

解决

有了上面的猜想方案，下面来实践一下

添加 @/utils/blob.js 文件

import axios from "axios";
// blob二进制 to base64
function blobToDataURI(blob, callback) {
    let reader = new FileReader();
    reader.onload = function (e) {
        callback(e.target.result);
    }
    reader.readAsDataURL(blob);
}
// blob 二进制转 base64
export function blobToBase64(url, data, callback) {
    axios({
        method: "get",
        url, // 请求地址
        data, // 参数
        responseType: "blob", // 表明返回服务器返回的数据类型
    }).then(res => {
        let blob = new Blob([res.data], { type: "iamge/png" });
        console.log("blobToBase64---->", blob);
        blobToDataURI(blob, (res) => {
            console.log("res---->", res);
            callback(res);
        })
    }).catch(err => {
        console.log(err);
    });
}

调用该方法：

// blob转base64
import { blobToBase64 } from  "@/utils/blob.js";
blobToBase64(`/xxx/imgcode?r=${Math.random()}`, null, (res) => {
    this.codeSrc = res;
})

改完之后，就可以了。