Problema entre dominios de imagen de Vue a base64, almacenamiento de Amazon
1. Explicación del problema: si el recurso existe en China (como Qiniu), no habrá dominio cruzado al convertir base64, pero el espacio de almacenamiento de este proyecto es Amazon S3 y el dominio cruzado ocurre durante la conversión.
2. Resolver
2.1 Primero configure image.crossOrigin = 'Anonymous' para resolver dominios cruzados
2.2 Agregue un número aleatorio después de la dirección de la imagen para resolver el problema de caché
image.src = "https://service-pic-us-west-1 -dev .s3-us-west-1.amazonaws.com/210119144355IWXruAXHKP.jpg?" + Math.random();
Método completo:
Vue.prototype.getBase64Img = function(params) {
if (params && params.url) {
var that = this;
var image = new Image();
image.src = params.url + "?" + Math.random();
image.crossOrigin = 'anonymous';
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
if (params.callback) {
if (params.data) {
that[params.callback](dataURL, params.data);
} else {
that[params.callback](dataURL);
}
};
return dataURL;
}
}
};