图像到 base64 JavaScript [重复]答案

【问题标题】：Image to base64 JavaScript [duplicate]图像到 base64 JavaScript [重复]
【发布时间】：2019-03-17 01:49:54
【问题描述】：

所以我尝试使用 HTML 画布元素获取外部图像 URL 并将其转换为 Base64，以便从中提取颜色。我正在取回一个 base64 字符串，但是当我检查输出时它是空白的。这是我的代码：

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = new Image();
    var imgData
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
    };
    img.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
    imgData = c.toDataURL();
    console.log(imgData)

有没有更好的方法来解决这个问题？

【问题讨论】：

标签： javascript image canvas base64 data-uri

【解决方案1】：

解决此问题的另一种方法是，您可以发出 HTTP 请求，然后将响应转换为 blob。 有一个错字，已修复

我使用服务器上的本地映像对此进行了测试，并且成功。

convert = (image, callback) => {
    let request = new XMLHttpRequest();
    request.onload = () => {
        let reader = new FileReader();
        reader.onloadend = () => {
            callback(reader.result);
        };
        reader.readAsDataURL(request.response);
    };
    request.open('GET', image);
    request.responseType = 'blob';
    request.send();
};
convert('https://via.placeholder.com/350x150', (base64) => {
    console.log('Base64:', base64)
})

输出：

Base64:, data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWBAMAAADOL2zRAAAAG1BMVEXMzMyWlpaqqqq3t7fFxcW+vr6xsbGjo6OcnJyLKnDGAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABAElEQVRoge3SMW+DMBiE4YsxJqMJtHOTITPeOsLQnaodGImEUMZEkZhRUqn92f0MaTubtfeMh/QGHANEREREREREREREtIJJ0xbH299kp8l8FaGtLdTQ19HjofxZlJ0m1+eBKZcikd9PWtXC5DoDotRO04B9YOvFIXmXLy2jEbiqE6Df7DTleA5socLqvEFVxtJyrpZFWz/pHM2CVte0lS8g2eDe6prOyqPglhzROL+Xye4tmT4WvRcQ2/m81p+/rdguOi8Hc5L/8Qk4vhZzy08DduGt9eVQyP2qoTM1zi0/uf4hvBWf5c77e69Gf798y08L7j0RERERERERERH9P99ZpSVRivB/rgAAAABJRU5ErkJggg==

确保您启用了CORS。因为如果未启用 CORS，您将收到如下错误：

Access to XMLHttpRequest at 'https://via.placeholder.com/350x150' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

【讨论】：

不知道为什么你会被否决，这实际上非常有帮助！我特别要求其他选择。非常感谢！这解决了我的问题。
@MoussaBoussi 没问题，只是要小心 CORS 政策。我只是在http://localhost:8000/test.jpg 放了一张测试图片，然后解决了 CORS 测试问题。