Javascript 从图像源生成base64数据URL

我试图从图像源生成base64数据URL，但每当我尝试转换它时，输出的dataURL只是没有图像的空画布。我错过了什么

src到base64函数：

imageToBase64(url, callback) {
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function () {
        let canvas = document.createElement('CANVAS');
        const ctx = canvas.getContext('2d');
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        const dataURL = canvas.toDataURL('image/png|gif|jpg');
        callback(dataURL);
        canvas = null;
    };
    img.src = url;
}

用法：

componentDidMount() {
    this.imageToBase64(this.props.originalUploadFile.data, (dataUrl) => {
        console.log(dataUrl) // I am getting a result, but it does not contain the image data
    });
}

---

你的代码对我有用。这可能是您提供的url与webpack生成的url不匹配的问题吗？也许可以尝试更改img.src=url；至img.src=require（url）。只是一个想法。不相关，但您的toDataURL参数无效，因此它将默认为

'image/png'

。对于您的问题，调试它的一个好方法是将您的图像和画布附加到文档中，然后查看它们的外观。如果你得到了一个结果，这意味着图像已经正确加载，所以你没有预期的结果是很奇怪的。