html
<img src="" crossorigin="anonymous" style="width:100px;height: 100px;" class="imgs">
<canvas id="myCanvas"></canvas>
js
function 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");
return dataURL;
}
function getBase64Image(url, ref) {
var image = new Image();
image.src = url + "?v=" + Math.random(); // 处理缓存
image.crossOrigin = "*"; // 支持跨域图片
image.onload = function () {
var base64 = drawBase64Image(image);
ref.src = base64;
};
}
getBase64Image('https://timetraveller.jydata.com/customer/image/20220120/2f20e449da884aa784c11ea5d3ee369d.jpeg',document.querySelector('.imgs'));