jquery对话框+；darkroomJS=返回原始图像？

我正在尝试实现：

var-imageURL=”http://cdn2.macworld.co.uk/cmsdata/reviews/3534761/iPhone_6_MG_1953.jpg";
变量图标=“”；
var img=新图像（）；
img.onload=函数（）{
变量对话框=$（''）；
var-dkrm；
对话({
标题：“图像编辑器”，
莫代尔：是的，
可拖动：错误，
自动打开：错误，
可调整大小：false，
宽度：600，
dialogClass:'块\弹出\对话框图像\编辑'，
打开：函数（）{
$（'body'）。附加（图标）；
setTimeout（函数（）{
dkrm=新暗室（“#图像编辑器图像”{
//大小选项
最小宽度：100，
身高：100，
最大宽度：500，
最大高度：500，
//比率:比率,，
背景颜色：“#000”，
//插件选项
插件：{
作物：{
quickCropKey:67，//键“c”
//身高：50，
//最小宽度：50，
//比率：4/3
},
保存：{
回调：函数（）{
var data=dkrm.canvas.toDataURL（）；
//在此处作为base64发送到服务器
$（“主体”）。删除（“#暗室图标”）；
dkrm.selfDestroy（）；//清除
$（'#mydialog'）。对话框（“关闭”）；
$（'#mydialog'）.dialog（'destroy'）.remove（）；
}
}
},
//初始化后脚本
初始化：函数（）{
var croplugin=this.plugins['crop']；
//选择地带（170,25300300）；
croplugin.requireFocus（）；
}
});
}, 3000);
},
关闭：函数（）{
$（此）.dialog（“关闭”）；
$（this.dialog（'destroy'）.remove（）；
$（“主体”）。删除（“#暗室图标”）；
dkrm.selfDestroy（）；//清除
}
});
html（“”）；
对话框（“打开”）；
};
img.onerror=函数（）{
};
img.src=imageURL；

这里有几个问题： 1.有没有办法在裁剪事件后从原始图像中裁剪base64？裁剪后，图像以我的示例中的485x500保存，但我希望从原始图像大小获得尺寸：例如，原始图像大小为4000x4000 px。暗室选项为500x500像素（最大宽度和最大高度）。我只是从左边和右边裁剪了一点边，希望有大小接近3900x4000的base64，但有485x500。 2.在这个例子中，有一个黑色画布而不是图像的bug。为了防止出现这种情况，我正在使用setTimeout测试一个of img.onload函数。有没有办法在jquery对话框中更有效地执行此操作？ 3.最后：如何设置control.svg图像的顺序？

---

非常感谢。

它根据

maxWidth:500、maxHeight:500、

进行裁剪和调整大小。我自己也面临着这个问题。试图修复它。

var imageURL = "http://cdn2.macworld.co.uk/cmsdata/reviews/3534761/iPhone_6_MG_1953.jpg";
            var icons = '<div id="darkroom-icons" style="height: 0px; width: 0px; position: absolute; visibility: hidden;"><!-- inject:svg --><svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 24 24" id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path fill="none" d="M0 0h24v24H0z"/></symbol><symbol viewBox="0 0 24 24" id="crop"><path fill="none" d="M0 0h24v24H0z"/><path d="M17 15h2V7c0-1.1-.9-2-2-2H9v2h8v8zM7 17V1H5v4H1v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2H7z"/></symbol><symbol viewBox="0 0 24 24" id="done"><path fill="none" d="M0 0h24v24H0z"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></symbol><symbol viewBox="0 0 24 24" id="redo"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></symbol><symbol viewBox="0 0 24 24" id="rotate-left"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/></symbol><symbol viewBox="0 0 24 24" id="rotate-right"><path fill="none" d="M0 0h24v24H0z"/><path d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/></symbol><symbol viewBox="0 0 24 24" id="save"><path fill="none" d="M0 0h24v24H0z"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></symbol><symbol viewBox="0 0 24 24" id="undo"><path fill="none" d="M0 0h24v24H0z"/><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></symbol></svg><!-- endinject --></div>';
            var img = new Image();
            img.onload = function () {
                var theDialog = $('<div id="mydialog"></div>');
                var dkrm;
                theDialog.dialog({
                    title: 'Image editor',
                    modal: true,
                    draggable: false,
                    autoOpen: false,
                    resizable: false,
                    width: 600,
                    dialogClass: 'block_popup_dialog image_edit',
                    open: function () {
                        $('body').append(icons);
                        setTimeout(function () {
                            dkrm = new Darkroom('#image-editor-image', {
                                // Size options
                                minWidth: 100,
                                minHeight: 100,
                                maxWidth: 500,
                                maxHeight: 500,
                                //ratio: ratio,
                                backgroundColor: '#000',
                                // Plugins options
                                plugins: {
                                    crop: {
                                        quickCropKey: 67, //key "c"
                                        //minHeight: 50,
                                        //minWidth: 50,
                                        //ratio: 4/3
                                    },
                                    save: {
                                        callback: function () {
                                            var data = dkrm.canvas.toDataURL();
                                            //send to server as base64 here
                                                $('body').remove('#darkroom-icons');
                                                dkrm.selfDestroy(); // Cleanup
                                                $('#mydialog').dialog("close");
                                                $('#mydialog').dialog('destroy').remove();
                                        }
                                    }
                                },
                                // Post initialize script
                                initialize: function () {
                                    var cropPlugin = this.plugins['crop'];
                                    // cropPlugin.selectZone(170, 25, 300, 300);
                                    cropPlugin.requireFocus();
                                }
                            });
                        }, 3000);
                    },
                    close: function () {
                        $(this).dialog("close");
                        $(this).dialog('destroy').remove();
                        $('body').remove('#darkroom-icons');
                        dkrm.selfDestroy(); // Cleanup
                    }
                });
                theDialog.html('<form style="width:1px; height:1px; opacity: 0; overflow:hidden;"><input type="file" /></form><img crossorigin="anonymous" id="image-editor-image" src="https://crossorigin.me/' + imageURL + '" />');
                theDialog.dialog('open');
            };
            img.onerror = function () {

            };
            img.src = imageURL;