原因

Question

我正在尝试调整图像大小并使用canvas.toDataUrl（）返回base64字符串表示。

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

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

Answer 1

原因

原因是画布有invalid size：

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

无效的尺寸包括任何＆lt; 1。

当图像元素没有加载数据时，默认情况下宽度和高度属性为0，直到图像完全加载并解码为位图，此时触发public class ExampleLinkedList { private String data; private ExampleLinkedList next; public ExampleLinkedList(String data,ExampleLinkedList next) { this.data = data; this.next = next; } public void addToEnd(String item) { while(next != null) { data = item; next.data = data; next = next.next; } } public boolean isEmpty() { if(next == null) { return true; } return false; } public String toString() { String result = data; while(next != null) { result = result + " " + next.data; next = next.next; } return result; } } public class Test { public static void main(String[] args) { ExampleLinkedList test1 = new ExampleLinkedList("Hello", null); ExampleLinkedList test2 = new ExampleLinkedList("Thanks", test1); ExampleLinkedList test3 = new ExampleLinkedList("Goodbye", test2); test3.addToEnd("AddedItem"); System.out.println(test3); } }处理程序：

onload

解决方案

确保图像已经加载，然后再从中读取任何大小（简化示例，采用适合您的代码的方式）：

var img = new Image();
document.write("w: " + img.width + " h: " + img.height);

Answer 2

当您致电resizeDimensions时，图片尚未完全加载。并且您在设置img尺寸之前尝试调整画布大小。

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

canvas.toDataUrl（）返回＆＃39;数据：，＆＃39;

2 个答案:

原因

解决方案