[echarts-wordcloud-generator] branch master updated: feat: user upload shape

[ovilia]

This is an automated email from the ASF dual-hosted git repository.

ovilia pushed a commit to branch master
in repository 
https://gitbox.apache.org/repos/asf/echarts-wordcloud-generator.git


The following commit(s) were added to refs/heads/master by this push:
     new 07a20d5  feat: user upload shape
07a20d5 is described below

commit 07a20d5daedd371ac87318477284472fe4ca705e
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Fri Jan 7 17:07:34 2022 +0800

    feat: user upload shape
---
 src/components/WChart.vue  |  5 +++--
 src/components/WConfig.vue | 40 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/components/WChart.vue b/src/components/WChart.vue
index 4d5cce5..61f8b0b 100644
--- a/src/components/WChart.vue
+++ b/src/components/WChart.vue
@@ -65,7 +65,6 @@ function run(data?: [], config?: Config) {
     const range = max - min || 1;
     return Math.random() * range + min;
   }
-  console.log(config?.shapeRatio)
 
   function render(maskImage?: HTMLImageElement) {
     chart.value!.setOption({
@@ -103,7 +102,9 @@ function run(data?: [], config?: Config) {
   let maskImage: HTMLImageElement;
   if (config) {
     maskImage = new Image();
-    maskImage.src = config.shape + '.png';
+    maskImage.src = config.shape.startsWith('blob:')
+      ? config.shape
+      : config.shape + '.png';
     maskImage.onload = () => {
       render(maskImage);
     };
diff --git a/src/components/WConfig.vue b/src/components/WConfig.vue
index 6eb62d4..637fb48 100644
--- a/src/components/WConfig.vue
+++ b/src/components/WConfig.vue
@@ -217,6 +217,17 @@
         <img v-bind:src="item.value + '.png'" />
         <div class="mark" v-if="item.isFromFreepik">*</div>
       </div>
+      <el-upload
+        class="img-select img-uploader"
+        v-bind:class="{ selected: imageUrl === selectedMask }"
+        action="https://jsonplaceholder.typicode.com/posts/";
+        :show-file-list="false"
+        list-type="picture"
+        :on-success="handleImageSuccess"
+        :before-upload="beforeImageUpload">
+        <img v-if="imageUrl" :src="imageUrl">
+        <i v-else class="el-icon-plus img-uploader-icon"></i>
+      </el-upload>
       <div class="hint">
         带 * 的形状来自 <a href="https://www.freepik.com"; title="Freepik" 
_target="_blank">Freepik</a>，查看<a 
href="https://media.flaticon.com/license/license.pdf"; _target="_blank">版权</a>
       </div>
@@ -260,6 +271,7 @@ const width = ref(90);
 const height = ref(90);
 const selectedMask = ref('heart');
 const shapeRatio = ref(true);
+const imageUrl = ref('');
 
 const normalizeFont = (font: string | { name: string; value: string }) => {
   if (typeof font === 'string') {
@@ -501,6 +513,18 @@ function addThemeColor() {
   emit('change');
 }
 
+function handleImageSuccess(res: any, file: any) {
+  // console.log(res, file);
+  imageUrl.value = URL.createObjectURL(file.raw);
+  selectedMask.value = imageUrl.value;
+  change();
+}
+
+function beforeImageUpload(file: any) {
+  // TODO: loading
+  return true;
+}
+
 function getConfig() {
   return {
     bgColor: bgColor.value,
@@ -615,6 +639,22 @@ $border-color: #e6e6e6;
   }
 }
 
+.img-uploader {
+  position: relative;
+  overflow: hidden;
+  top: 6px;
+}
+
+.img-uploader-icon {
+  font-size: 28px;
+  line-height: 55px;
+  text-align: center;
+}
+
+.el-upload {
+  display: block;
+}
+
 .el-checkbox {
   --el-checkbox-font-color: #888;
   margin-top: 7px;

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org