[英]canvas.toDataURL returns empty data:, string using array and loop
[英]canvas.toDataUrl() returns 'data:,'
我正在尝试调整图像大小并使用canvas.toDataUrl()获取base64字符串表示形式。
我的代码如下(见下文)。 我的问题是,每当我第一次启动它时,它都会返回'data:,'。
然后,当我重做重新调整大小(使用按钮调用)时,它工作正常,它返回一个非空的base64字符串。 到底是怎么回事?
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
原因是画布的大小无效 :
[...]一个例外是如果画布没有高度或没有宽度,在这种情况下结果可能只是“data:,”。
无效大小包括<1。
当图像元素没有加载数据时,默认情况下宽度和高度属性为0,直到图像完全加载并解码为位图,此时触发onload
处理程序:
var img = new Image(); document.write("w: " + img.width + " h: " + img.height);
在从中读取任何大小之前确保图像已加载(简化示例,采用适合您的代码的方式):
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
当您调用resizeDimensions
时,图像尚未完全加载。 并且您正在尝试在设置img尺寸之前调整画布大小。
将该代码放在img.onload
处理程序中,以确保图像完全加载。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.