1、网图转base64
this.getBase64Image(this.sharePoster, "coopCachetImg");
// 第一个参数是图片的URL地址,第二个是转换成base64地址后要赋值给的img标签
getBase64Image(url, ref) {
var that = this;
var image = new Image();
image.crossOrigin = "*"; // 支持跨域图片
image.src = url + "?v=" + Math.random(); // 处理缓存
image.onload = function() {
var base64 = that.drawBase64Image(image);
// that.$refs[ref].src = base64;
};
}
drawBase64Image(img) {
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 dataURL = canvas.toDataURL("image/png");
// console.log(888, dataURL); 这里就拿到了base64图片
this.sharePosterIs = dataURL;
return dataURL;
}
2、img图片转背景图(简单,但图片会不清晰)