首页 文章

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

提问于
浏览 次
0

这个问题在这里已有答案：

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

html :

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

在控制器中我这样做：

controller :

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 =

你可以测试它here .

我尝试给画布一个高度和宽度，但结果是：

数据：，

对于différents图像来说它是一回事，你有什么想法吗？

javascript canvas base64

1 回答

  • 0

    您正在尝试在完成加载之前在画布上绘制图像 .
    设置 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;
    回复于

相关问题