我需要一些帮助。我们似乎在 iOS 上遇到了有关通过 HTML 5 / Canvas 获取图像的 base64 的问题。如果我们使用画布的默认高度/宽度或对高度和宽度进行硬编码,一切都会正常工作。但是,如果我们将画布高度/宽度设置为图像 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;
}
我们需要能够根据图像本身确定画布的高度/宽度。
非常感谢任何指导或帮助。