canvas.toDataUrl()返回'data :,' [英] canvas.toDataUrl() returns 'data:,'
问题描述
我正在尝试调整图像大小,并使用canvas.toDataUrl()获取base64字符串表示形式。
I am trying to resize an image and get back the base64 string representation using canvas.toDataUrl().
我的代码如下(如下所示)。我的问题是,每次我第一次启动它时,它都会返回 data:。
My code is as follows (see below). My issue is that every time when I first initiate it, it returns 'data:,'.
然后,当我重新调整大小(使用按钮调用)时,它工作正常,并返回一个非空的base64字符串。
Then when I redo the re-sizing (calling with button), then it works fine and it returns me a nonempty base64 string. What is going on?
function drawAndResizeFunction(images)
var qDraw = $q.defer();
// 1
drawCanvasWrapper().then(function(canvasData){
qDraw.resolve(canvasData)
});
// 2
function drawCanvasWrapper() {
var pResults = images.map(function (imageObj) {
//return drawCanvassIter(imageObj.tempURL); // tempUrl
return resizeIter(imageObj.tempURL).then(function(result){
console.log("resized", result) // *** RETURNS data:, in first attempt
return result;
})
});
return $q.all(pResults);
};
// 3inval
// returns canvasdata
function resizeIter(nativeURL) {
console.log("resizeIter")
var qResize = $q.defer();
var canvas = document.getElementById("resizecanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = nativeURL;
var newScales = resizeDimensions(img.width, img.height)
var iw =canvas.width =img.width =newScales.iw;
var ih =canvas.height =img.height =newScales.ih;
img.onload = function () {
// --> 4
ctx.drawImage(img, 0, 0, iw, ih);
$timeout(function(){
qResize.resolve(canvas.toDataURL("image/jpeg"));
}, 200)
};
return qResize.promise;
//
//
function resizeDimensions(iw, ih) {
var scaleFactor = 1;
var targetSize = 800;
if (iw > targetSize || ih > targetSize) {
if(iw > ih) {
scaleFactor = targetSize/iw;
} else {
scaleFactor = targetSize/ih;
}
}
var iwAdj = Math.floor(iw*scaleFactor);
var ihAdj = Math.floor(ih*scaleFactor);
return {
ih: ihAdj, iw: iwAdj
}
};
};
return qDraw.promise;
}; // done
推荐答案
原因
原因是画布具有无效的大小:
[...]唯一的例外是如果画布没有高度或没有高度
宽度,在这种情况下,结果可能只是数据:。
[...] The one exception to this is if the canvas has either no height or no width, in which case the result might simply be "data:,".
无效的尺寸包括任何< 1。
Invalid size is including anything < 1.
当图像元素未加载数据时,默认情况下width和height属性为0,直到图像完全加载并解码为位图为止,哪个时间触发 onload
处理程序:
When an image element doesn't have data loaded the width and height properties are 0 by default until the image has been fully loaded and decoded into a bitmap, at which time triggers the onload
handler:
var img = new Image();
document.write("w: " + img.width + " h: " + img.height);
在读取图像的任何大小之前,请确保已加载图像(简化示例,请按照适合您的代码的方式采用) :
Make sure the image has loaded before reading any size from it (simplified example, adopt as seen fit for your code):
var img = new Image();
var w, h;
img.onload = function() {
w = this.width; // here we can extract image size
h = this.height;
// set canvas size here as well before drawing the image in
// continue you code from here using f.ex. a callback
document.write("w: " + w + " h: " + h);
};
img.src = "http://i.imgur.com/eekEotAb.jpg"; // set src last
这篇关于canvas.toDataUrl()返回'data :,'的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!