Selaa lähdekoodia

无跨域图片的情况下,脑图增加导出图片的功能

unknown 5 vuotta sitten
vanhempi
commit
5d4eec6c1c

+ 33 - 5
o2web/source/x_component_MinderEditor/Main.js

@@ -460,7 +460,7 @@ MWF.xApplication.MinderEditor.Main = new Class({
         this.restActions.saveMind( data, function(json){
             var id = json.data.id;
             this.restActions.getMind( id, function( json2 ){
-                var converter = new MWF.xApplication.MinderEditor.Converter(this, this.minder, this);
+                var converter = new MWF.xApplication.MinderEditor.Converter(this, this.minder);
                 converter.toPng(180, 130, function( img ){
 
                     var formData = new FormData();
@@ -515,7 +515,7 @@ MWF.xApplication.MinderEditor.Main = new Class({
         }.bind(this);
 
         var callback = function( id, flag ){
-            var converter = new MWF.xApplication.MinderEditor.Converter(this, this.minder, this);
+            var converter = new MWF.xApplication.MinderEditor.Converter(this, this.minder);
             converter.toPng(180, 130, function( img ){
                 var formData = new FormData();
                 formData.append('file', img, "untitled.png");
@@ -645,7 +645,13 @@ MWF.xApplication.MinderEditor.Main = new Class({
 });
 
 MWF.xApplication.MinderEditor.Converter = new Class({
-    initialize: function (editor, minder) {
+    Implements: [Options, Events],
+    options: {
+        "background": null,
+        "zoom": 1
+    },
+    initialize: function (editor, minder, options) {
+        this.setOptions(options);
         this.editor = editor;
         this.minder = minder;
     },
@@ -678,12 +684,16 @@ MWF.xApplication.MinderEditor.Converter = new Class({
     },
     toCanvas: function (width, height, callback, svg) {
         this.loadCanvgResource(function () {
+
             if( !svg )svg = this.editor.contentNode.get("html");
 
             var coordinates = this.getSvgCoordinates();
-
             var offsetLeft = Math.abs(coordinates.left), offsetTop = Math.abs(coordinates.top);
             var contentWidth = coordinates.x, contentHeight = coordinates.y;
+
+            if( !width  )width = contentWidth + offsetLeft;
+            if( !height )height = contentHeight + offsetTop;
+
             var matrix;
             if (width && height) {
                 if ((width > coordinates.x) && (height > coordinates.y)) {
@@ -708,6 +718,13 @@ MWF.xApplication.MinderEditor.Converter = new Class({
                 if (height < coordinates.y) {
                     yRatio = height / coordinates.y;
                 }
+                if( this.options.zoom && this.options.zoom !== 1 ){
+                    var z = parseFloat( this.options.zoom );
+                    xRatio = xRatio ? xRatio * z : z;
+                    yRatio = yRatio ? yRatio * z : z;
+                    width = width * z;
+                    height = height * z;
+                }
                 if (xRatio || yRatio) {
 
                     contentWidth = width;
@@ -725,7 +742,11 @@ MWF.xApplication.MinderEditor.Converter = new Class({
                         oy = ( height - zoom * coordinates.y )/2;
                     }
 
-                    matrix = zoom + " 0 0 " + zoom + " " + ox + " " + oy;
+                    if( this.options.zoom && this.options.zoom !== 1 ) {
+                        matrix = zoom + " 0 0 " + zoom + " " + 0 + " " + 0;
+                    }else{
+                        matrix = zoom + " 0 0 " + zoom + " " + ox + " " + oy;
+                    }
                 }
             }
 
@@ -744,6 +765,13 @@ MWF.xApplication.MinderEditor.Converter = new Class({
                 width: contentWidth, height: contentHeight,
                 styles: {width: contentWidth + "px", height: contentHeight + "px"}
             }).inject(this.editor.node);
+
+            // if( this.options.background ){
+            //     var ctx = canvas.getContext("2d");
+            //     ctx.fillStyle = this.options.background;
+            //     ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // }
+
             canvg(canvas, svg, {
                 useCORS : true, log: true, renderCallback: function (dom) {
                     if (callback)callback(canvas);

+ 28 - 2
o2web/source/x_component_MinderEditor/MainMenu.js

@@ -365,12 +365,38 @@ MWF.xApplication.MinderEditor.MainMenu = new Class({
             this.app.openRenameDialog();
             this.hide();
         }.bind(this) );
-        this.createActionNode( actionArea, "download", "导出", "将文件导出到本地", function(){
-            this.app.openExportDialog();
+        this.createActionNode( actionArea, "download", "导出", "导出图片到本地", function(){
+            // this.app.openExportDialog();
+            this.exportAsImage();
             this.hide();
         }.bind(this));
 
     },
+    exportAsImage : function(){
+        var title = this.app.minder.getRoot().getText();
+
+        var converter = new MWF.xApplication.MinderEditor.Converter(this.app, this.app.minder, {
+            "background": "#ffffff",
+            "zoom": 2
+        });
+        converter.toPng(null, null, function( img ){
+            var id = this.app.data.id;
+            var formData = new FormData();
+            formData.append('file', img, title+".png");
+            formData.append('site', id);
+
+            MWF.xDesktop.uploadImageByScale( id, "mindInfo", -1, formData, img,
+                function(json){
+                    var url = o2.Actions.load("x_file_assemble_control").FileAction.action.actions.downloadStream.uri.replace( "{id}", json.data.id );
+                    url = o2.filterUrl( o2.Actions.load("x_file_assemble_control").FileAction.action.address + url);
+                    window.open(url);
+                }.bind(this)
+            );
+
+        }.bind(this), function(){
+            this.app.notice("抱歉,脑图中有外网图片,无法导出","error")
+        }.bind(this))
+    },
     openFileVersion : function(){
         var _self = this;
         this.empty();