【问题标题】：canvas.toDataUrl() returns 'data:,'canvas.toDataUrl() 返回“数据：，”
【发布时间】：2015-07-16 17:57:45
【问题描述】：

我正在尝试调整图像大小并使用 canvas.toDataUrl() 取回 base64 字符串表示形式。

我的代码如下（见下文）。我的问题是每次我第一次启动它时，它都会返回“数据：，”。

然后，当我重新调整大小（使用按钮调用）时，它可以正常工作并返回一个非空 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

【问题讨论】：

其余的代码在哪里做画布到dataurl？现在这听起来像是一个种族问题，你有没有在准备/加载时调用它？还是 ajax 函数？
我使用 angular 并从我的控制器调用函数 drawAndResizFunction。该功能在服务中可用。你需要 HTML 吗？
奇怪的是它并不总是发生......

标签： javascript canvas

【解决方案1】：

原因

原因是画布上有invalid size:

[...] 一个例外是画布没有高度或没有宽度，在这种情况下，结果可能只是“数据：”。

无效的大小包括任何

当图像元素没有加载数据时，宽度和高度属性默认为 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

【讨论】：

@markE 是的，其实大部分都必须进去，但是答案给出了一个大纲 OP应该能够实现看到关键问题，我希望:)
谢谢，解决了。将在我的下一个项目中使用此设置。

【解决方案2】：

当您调用resizeDimensions 时，图像尚未完全加载。并且您正试图在设置 img 尺寸之前调整画布的大小。

将该代码放入您的 img.onload 处理程序中，以保证图像完全加载。

【讨论】：