Question

我一直在尝试使用一个名为drawr的应用程序，它的作用是：它在画布上创建绘图应用程序。但是它没有内置的rotate函数。所以我需要自己做。我可以成功旋转画布，但是在旋转undoStack时会变得有些复杂。让我向你们一点解释我的代码；

我创建了一个新的抽屉，因为旋转drawr画布只会弄乱偏移量。比起保存当前画布的undoStack，以便在旋转后的新画布上进行绘制。

$('#rotater').on('click', function () {
            var newDrawer = document.createElement("canvas");
            newDrawer.width = drawer.height;
            newDrawer.height = drawer.width;
            var ctx = newDrawer.getContext("2d");

            var recentUndoStack = drawer.undoStack;
            $(drawer).drawr("destroy");
            $(newDrawer).addClass("demo-canvas");
            $(newDrawer).addClass("drawr-test1");
            $(drawer).replaceWith(newDrawer);

            var photoToEditNewCanvas = new Image();

            photoToEditNewCanvas.onload = function(){

                var imageDraw = new Image();
                imageDraw.onload = function(){
                    $("#drawr-container").css({
                        width: this.width,
                        height: this.height
                    });

                    $(newDrawer).drawr({
                        enable_tranparency: true,
                        canvas_width: this.width,
                        canvas_height: this.height,
                        undo_max_levels: 100
                    });

                    ctx.drawImage(this, 0, 0, this.width, this.height);

                    $(newDrawer).drawr('start');

                    newDrawer.undoStack = [{
                        data: newDrawer.toDataURL('image/png'),
                        current: true
                    }];

                    for(var i = 1; i < recentUndoStack.length; i++){
                        var anImage = new Image();
                        var vuhu = imageRotater(recentUndoStack[i].data, this.width, this.height, 90);

// THIS 'vuhu' should be the base64 string of the rotated image but it isnt.

                        anImage.src = vuhu;
                        newDrawer.undoStack.push({
                            data: vuhu,
                            current: true
                        });
                    }
                };
                var data = imageRotater(recentUndoStack[0].data, this.width, this.height, 90);
                imageDraw.src = data;

            };

            photoToEditNewCanvas.src = recentUndoStack[0].data;
        });

我的Rotate函数，我极力尝试返回旋转图像的base64字符串。但是对于undoStack元素，rotaterImage.onload函数的返回值data始终为空白26.1KB字符串。我相信问题出在异步onload函数上，但我不知道如何实现它以适合我的代码；

        function imageRotater(imgData, width, height, degree){
            if($("#rotaterImage").hasClass("rotate")){
                $("#rotaterImage").removeClass("rotate");
            }
            var rotaterCanvas = document.createElement("canvas");
            rotaterCanvas.width = height;
            rotaterCanvas.height = width;
            var rotaterContext = rotaterCanvas.getContext("2d");
            var rotaterImage = document.getElementById("rotaterImage");
            rotaterImage.onload = function(){
                $("#rotaterImage").addClass("rotate");

                rotaterContext.translate(rotaterCanvas.width / 2, rotaterCanvas.height / 2);

                rotaterContext.rotate(degree * Math.PI / 180);

                rotaterContext.drawImage(this, -width / 2, -height / 2);

                rotaterContext.rotate(-degree * Math.PI / 180);

                rotaterContext.translate(-rotaterCanvas.width / 2, -rotaterCanvas.height / 2);
                var data = rotaterCanvas.toDataURL("image/png");
                return data;
            }
            rotaterImage.src = imgData;
            //var data = rotaterImage.onload();
            return rotaterImage.onload();
        }

如何从onload函数返回一个值，并从Rotate函数返回相同的值？

从Image.onload函数返回无效

0 个答案: