我需要一些帮助.对于通过

HTML 5 / Canvas获取图像的base64,我们似乎遇到了iOS问题.如果我们使用画布的默认高度/宽度或硬编码高度和宽度,一切正常.但是,如果我们将画布高度/宽度设置为图像src的高度/宽度,则图像将不会加载到画布中,因此我们不会将图像作为base64.

有效的代码片段:

function convertImageToBase64(imgUrl, callback) {

var canvas = document.createElement("canvas");

var context = canvas.getContext('2d');

// load image from data url

var imageObj= new Image();

imageObj.onload = function () {

var dataUrl;

context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);

dataUrl = canvas.toDataURL("image/png");

callback.call(this, dataUrl);

canvas = null;

};

imageObj.src = imgUrl;

}

代码段在iOS上不起作用但在Android上有效:

function convertImageToBase64(imgUrl, callback) {

var canvas = document.createElement("canvas");

var context = canvas.getContext('2d');

// load image from data url

var imageObj= new Image();

imageObj.onload = function () {

var dataUrl;

canvas.width = imageObj.width;

canvas.height = imageObj.height;

context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);

dataUrl = canvas.toDataURL("image/png");

callback.call(this, dataUrl);

canvas = null;

};

imageObj.src = imgUrl;

}

我们需要能够根据图像本身建立画布高度/宽度.

非常感谢任何指导或帮助.

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐