将图像转换为base64可以工作但不好[重复]答案

【问题标题】：Convert image to base64 works but bad [duplicate]将图像转换为base64可以工作但不好[重复]
【发布时间】：2015-11-06 17:01:15
【问题描述】：

我想将图片转换为base64。所以，在 html 中我放了一个带有 display:none 的 img 和 canvas

html：

<img style="display:none" id="imgDownload" />
<canvas style="display:none" id="myCanvas" />

在控制器中我这样做：

控制器：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imgDownload");
img.crossOrigin = 'anonymous';
img.src = conf.storeUrl + '/' +$scope.fRoot.name + $scope.getFileWay() + value.name;
console.log(img);
ctx.drawImage(img, img.naturalHeight, img.naturalWidth);
var base64Img = c.toDataURL();

我得到了一个base64，但它并不好......

看一个例子：

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68 / 0AAAAASUVORK5CYII = P>

你可以测试一下here。

我尝试为画布指定高度和宽度，但结果是：

数据：，

对于不同的图像也是一样的，你有什么想法吗？

【问题讨论】：

标签： javascript canvas base64

【解决方案1】：

您正试图在画布完成加载之前在画布上绘制图像。
设置img.src后，加载图片需要一些时间，所以你必须等到加载完成后再继续。
您可以为此使用img.onload：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imgDownload");
img.crossOrigin = 'anonymous';
img.onload = function()
{
    console.log(img);
    ctx.drawImage(img, img.naturalHeight, img.naturalWidth);
    var base64Img = c.toDataURL();
};
img.src = conf.storeUrl + '/' +$scope.fRoot.name + $scope.getFileWay() + value.name;

【讨论】：

我尝试使用 onload 但 onload 不起作用...