使用onload事件转换图像加载后

函数加载(img) { 让c = document.createElement('canvas') c.getContext (2 d)。drawImage(img, 0,0) 味精。innerText = c.toDataURL实现(); ｝ Pre {word-wrap: break-word;宽度:500 px;空白:pre-wrap;｝ <img onload="loaded(this)" src="https://cors-anywhere.herokuapp.com/http://lorempixel.com/200/140" crossorigin="anonymous"/> < pre id =“味精”> < / >之前

在HTML5中最好使用这个:

{
//...
canvas.width = img.naturalWidth; //img.width;
canvas.height = img.naturalHeight; //img.height;
//...
}

这个函数接受URL，然后返回BASE64图像

function getBase64FromImageUrl(url) {
    var img = new Image();

    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width =this.width;
        canvas.height =this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
    };

    img.src = url;
}

这样叫它: getBase64FromImageUrl(“图像/ slbltxt.png”)

它的2022年，我更喜欢使用现代createImageBitmap()而不是onload事件。

*注意:图像应该是相同的来源或CORS启用

async function imageToDataURL(imageUrl) { let img = await fetch(imageUrl); img = await img.blob(); let bitmap = await createImageBitmap(img); let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); canvas.width = bitmap.width; canvas.height = bitmap.height; ctx.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height); return canvas.toDataURL("image/png"); // image compression? // return canvas.toDataURL("image/png", 0.9); }; (async() => { let dataUrl = await imageToDataURL('https://en.wikipedia.org/static/images/project-logos/enwiki.png') wikiImg.src = dataUrl; console.log(dataUrl) })(); <img id="wikiImg">

很久以后，这里没有一个答案是完全正确的。

当在画布上绘制时，传递的图像是未压缩的+所有预相乘。 当导出时，它用不同的算法解压缩或重压缩，并且不相乘。

在这个过程中，所有浏览器和设备都有不同的舍入错误 (见画布指纹)。

因此，如果有人想要base64版本的图像文件，他们必须再次请求它(大多数时候它将来自缓存)，但这次是作为一个Blob。

然后，您可以使用FileReader将其作为ArrayBuffer或dataURL读取。

function toDataURL(url, callback){ var xhr = new XMLHttpRequest(); xhr.open('get', url); xhr.responseType = 'blob'; xhr.onload = function(){ var fr = new FileReader(); fr.onload = function(){ callback(this.result); }; fr.readAsDataURL(xhr.response); // async call }; xhr.send(); } toDataURL(myImage.src, function(dataURL){ result.src = dataURL; // now just to show that passing to a canvas doesn't hold the same results var canvas = document.createElement('canvas'); canvas.width = myImage.naturalWidth; canvas.height = myImage.naturalHeight; canvas.getContext('2d').drawImage(myImage, 0,0); console.log(canvas.toDataURL() === dataURL); // false - not same data }); <img id="myImage" src="https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png" crossOrigin="anonymous"> <img id="result">

使用onload事件转换图像加载后

函数加载(img) { 让c = document.createElement('canvas') c.getContext (2 d)。drawImage(img, 0,0) 味精。innerText = c.toDataURL实现(); ｝ Pre {word-wrap: break-word;宽度:500 px;空白:pre-wrap;｝ <img onload="loaded(this)" src="https://cors-anywhere.herokuapp.com/http://lorempixel.com/200/140" crossorigin="anonymous"/> < pre id =“味精”> < / >之前