From ccfcb880a7431785513b3a37988bd28f9110e5b5 Mon Sep 17 00:00:00 2001
From: harveyshao <harveyshao@tencent.com>
Date: Thu, 9 Dec 2021 00:46:31 +0800
Subject: [PATCH] opt chart

---
 frame.js                  |  8 ++++++++
 lib/user.js               | 15 +++++++++++++++
 plugin/local/wiki/word.js |  8 ++++++++
 plugin/state.js           |  5 ++++-
 plugin/story/spide.js     |  5 ++++-
 5 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/frame.js b/frame.js
index 3904556b..90683bc1 100644
--- a/frame.js
+++ b/frame.js
@@ -576,6 +576,14 @@ Volcanos("onmotion", {help: "动态特效", list: [], _init: function(can, targe
             can.page.Select(can, target||can._output, html.IFRAME, function(item) {
                 can.page.Modify(can, item, {style: {height: can.Conf(html.HEIGHT)-88, width: can.Conf(html.WIDTH)-30}})
             })
+            can.page.Select(can, target||can._output, html.SVG, function(item) {
+                item.oncontextmenu = function(event) {
+                    can.user.carte(event, can, {"导出": function(event, can, button) {
+
+                    }}, ["导出"])
+                }
+                // can.page.Modify(can, item, {style: {height: can.Conf(html.HEIGHT)-88, width: can.Conf(html.WIDTH)-30}})
+            })
         },
     },
     float: {_hash: {},
diff --git a/lib/user.js b/lib/user.js
index e65b9fe8..75454502 100644
--- a/lib/user.js
+++ b/lib/user.js
@@ -157,6 +157,21 @@ Volcanos("user", {help: "用户操作", agent: {
         })
     } },
 
+    toPNG: function(can, name, text, height, width) {
+        if (text.indexOf("<svg") != 0) {
+            text = '<svg xmlns="http://www.w3.org/2000/svg">'+text+"</svg>"
+        }
+        var img = document.createElement("img")
+        img.onload = function() {
+            var canvas = document.createElement("canvas")
+            canvas.height = height, canvas.width = width
+            canvas.getContext("2d").drawImage(img, 0, 0)
+
+            var a = document.createElement("a")
+            a.href = canvas.toDataURL("image/png")
+            a.download = name, a.click()
+        }, img.src = "data:image/svg+xml,"+encodeURIComponent(text)
+    },
     copy: function(event, can, text) {
         if (navigator.clipboard) { var ok = false
             navigator.clipboard.writeText(text).then(function() { ok = true })
diff --git a/plugin/local/wiki/word.js b/plugin/local/wiki/word.js
index 9e67739e..a11d2f5e 100644
--- a/plugin/local/wiki/word.js
+++ b/plugin/local/wiki/word.js
@@ -109,6 +109,14 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
             }
         }, can._output, target)
     },
+    chart: function(can, data, target) {
+        target.oncontextmenu = function(event) {
+            var ui = can.user.carte(event, can, {"导出": function(event, can, button) {
+                can.user.toPNG(can, "hi.png", target.outerHTML, parseInt(target.getAttribute(html.HEIGHT)), parseInt(target.getAttribute(html.WIDTH)))
+            }}, ["导出"])
+            can.page.Modify(can, ui._target, {style: {left: event.clientX, top: event.clientY}})
+        }
+    },
 
     iframe: function(can, data, target) { var meta = can.base.Obj(data.meta)
         can.page.Modify(can, target, {width: can.Conf("width")-200})
diff --git a/plugin/state.js b/plugin/state.js
index 6f0f2a8a..29f07213 100644
--- a/plugin/state.js
+++ b/plugin/state.js
@@ -73,7 +73,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, conf,
 })
 Volcanos("onaction", {help: "交互操作", list: [
         "共享工具", "生成链接", "生成脚本", "保存参数", "清空参数", "刷新数据", [
-            "其它 ->", "复制数据", "下载数据", "清空数据", "删除工具", "摄像头",
+            "其它 ->", "复制数据", "下载数据", "清空数据", "删除工具", "摄像头", "生成图片",
         ],
     ], _init: function(can, msg, list, cb, target) {},
     _engine: function(event, can, button) {
@@ -136,6 +136,9 @@ Volcanos("onaction", {help: "交互操作", list: [
     },
     "清空数据": function(event, can) { can.onmotion.clear(can, can._output) },
     "删除工具": function(event, can) { can.page.Remove(can, can._target) },
+    "生成图片": function(event, can) {
+        can.user.toPNG(can, "hi.png", can._target.outerHTML, can.Conf(html.HEIGHT), can.Conf(html.WIDTH))
+    },
 
     "摄像头": function(event, can) {
         var constraints = {audio: false, video: {width: 200, height: 200}}
diff --git a/plugin/story/spide.js b/plugin/story/spide.js
index 72bb8414..a8714323 100644
--- a/plugin/story/spide.js
+++ b/plugin/story/spide.js
@@ -57,7 +57,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
         return tree.meta&&tree.meta.color || (tree.list == 0? cli.PURPLE: cli.YELLOW)
     },
 }, [""])
-Volcanos("onaction", {help: "用户操作", list: ["编辑", [ice.VIEW, "横向", "纵向"]],
+Volcanos("onaction", {help: "用户操作", list: ["编辑", [ice.VIEW, "横向", "纵向"], "生成图片"],
     "编辑": function(event, can) {
         can.onmotion.toggle(can, can._action)
         can.onmotion.toggle(can, can._status)
@@ -78,6 +78,9 @@ Volcanos("onaction", {help: "用户操作", list: ["编辑", [ice.VIEW, "横向"
         can.height = 0, can.onaction._draw_vertical(can, can._tree[""], can.margin, can.margin+can.size)
         can.svg.Val(html.HEIGHT, can.height+can.margin)
     },
+    "生成图片": function(event, can) {
+        can.user.toPNG(can, "hi.png", can.svg.outerHTML, can.svg.Val(html.HEIGHT), can.svg.Val(html.WIDTH))
+    },
     _draw: function(can, tree, x, y, style) {
         var color = can.onimport._color(can, tree)
         tree.view = can.onimport.draw({}, can, {