canvas-drawing-editor 2.6.0 → 2.6.2

package/README.md

@@ -576,6 +576,38 @@ editor.tweenAnimate(objectId, { x: 400 }, {
 editor.stopAllAnimations();
 ```
 
+### 🖼️ 图片导出 API
+
+通过 `getImageData()` 方法可以获取画布图片数据（base64 或 Blob），无需触发下载：
+
+```javascript
+const editor = document.querySelector('canvas-drawing-editor');
+
+// 获取 base64 格式（默认）
+const dataURL = await editor.getImageData();
+console.log(dataURL); // data:image/png;base64,...
+
+// 获取 Blob 格式（适合上传到服务器）
+const blob = await editor.getImageData({
+  type: 'blob',
+  format: 'png',        // 'png' | 'jpeg' | 'webp'
+  quality: 0.92,        // jpeg/webp 质量 (0-1)
+  background: '#ffffff' // 背景色
+});
+
+// 上传到服务器示例
+const formData = new FormData();
+formData.append('image', blob, 'canvas.png');
+await fetch('/api/upload', { method: 'POST', body: formData });
+```
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `format` | string | 'png' | 图片格式：'png', 'jpeg', 'webp' |
+| `quality` | number | 0.92 | 图片质量（仅 jpeg/webp 有效，0-1） |
+| `type` | string | 'dataURL' | 返回类型：'dataURL' 或 'blob' |
+| `background` | string | '#ffffff' | 背景颜色 |
+
 ### 🛠️ 开发
 
 ```bash
@@ -1127,6 +1159,38 @@ editor.tweenAnimate(objectId, { x: 400 }, {
 editor.stopAllAnimations();
 ```
 
+### 🖼️ Image Export API
+
+Use `getImageData()` method to get canvas image data (base64 or Blob) without triggering download:
+
+```javascript
+const editor = document.querySelector('canvas-drawing-editor');
+
+// Get base64 format (default)
+const dataURL = await editor.getImageData();
+console.log(dataURL); // data:image/png;base64,...
+
+// Get Blob format (suitable for server upload)
+const blob = await editor.getImageData({
+  type: 'blob',
+  format: 'png',        // 'png' | 'jpeg' | 'webp'
+  quality: 0.92,        // jpeg/webp quality (0-1)
+  background: '#ffffff' // Background color
+});
+
+// Upload to server example
+const formData = new FormData();
+formData.append('image', blob, 'canvas.png');
+await fetch('/api/upload', { method: 'POST', body: formData });
+```
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `format` | string | 'png' | Image format: 'png', 'jpeg', 'webp' |
+| `quality` | number | 0.92 | Image quality (jpeg/webp only, 0-1) |
+| `type` | string | 'dataURL' | Return type: 'dataURL' or 'blob' |
+| `background` | string | '#ffffff' | Background color |
+
 ### 🛠️ Development
 
 ```bash

package/dist/canvas-drawing-editor.es.js

@@ -1240,6 +1240,12 @@ class H extends HTMLElement {
   clearSelection() {
     this.selectedIds.clear(), this.transformOrigin = null;
   }
+  // 更新对象颜色（支持 GROUP 对象的子对象颜色更新）
+  updateObjectColor(t, i) {
+    t.color = i, t.type === "GROUP" && t.children.forEach((s) => {
+      s.color = i, "fillColor" in s && s.fillColor && (s.fillColor = i), s.type !== "TEXT" && s.type !== "RICH_TEXT" && (s.color = i, "fillColor" in s && (s.fillColor = i));
+    }), "fillColor" in t && t.fillColor && (t.fillColor = i);
+  }
   // 派发变化事件
   dispatchChangeEvent() {
     this.dispatchEvent(new CustomEvent("editor-change", {
@@ -1563,7 +1569,7 @@ class H extends HTMLElement {
     else if (this.tool === "RICH_TEXT")
       this.showRichTextEditor(i, e), this.isDragging = !1;
     else {
-      this.saveHistory();
+      this.saveHistory(), this.hideEmptyHint();
       const o = this.generateId();
       if (this.tool === "RECTANGLE")
         this.currentObject = { id: o, type: "RECTANGLE", x: i, y: e, width: 0, height: 0, color: this.color, lineWidth: this.lineWidth, lineStyle: this.lineStyle, fillMode: this.fillMode };
@@ -1604,7 +1610,7 @@ class H extends HTMLElement {
       this.finishSmoothCurve();
       return;
     }
-    this.smoothCurvePoints.push({ x: t, y: i }), this.isSmoothCurveDrawing = !0, this.renderCanvas();
+    this.smoothCurvePoints.push({ x: t, y: i }), this.isSmoothCurveDrawing = !0, this.hideEmptyHint(), this.renderCanvas();
   }
   // 完成平滑曲线绘制
   finishSmoothCurve() {
@@ -1652,7 +1658,7 @@ class H extends HTMLElement {
       y: i,
       type: "smooth"
     };
-    this.bezierPoints.push(s), this.isBezierDrawing = !0, this.bezierDraggingPoint = this.bezierPoints.length - 1, this.bezierDraggingHandle = "cp2", this.renderCanvas();
+    this.bezierPoints.push(s), this.isBezierDrawing = !0, this.bezierDraggingPoint = this.bezierPoints.length - 1, this.bezierDraggingHandle = "cp2", this.hideEmptyHint(), this.renderCanvas();
   }
   // 完成贝塞尔曲线路径
   finishBezierPath(t) {
@@ -1838,9 +1844,9 @@ class H extends HTMLElement {
                 m.fontSize = Math.max(8, Math.round(b.fontSize * Math.min(d, u)));
               else if (m.type === "RICH_TEXT") {
                 const k = b;
-                m.fontSize = Math.max(8, Math.round(k.fontSize * Math.min(d, u))), m.segments = k.segments.map((z) => ({
-                  ...z,
-                  fontSize: z.fontSize ? Math.max(8, Math.round(z.fontSize * Math.min(d, u))) : void 0
+                m.fontSize = Math.max(8, Math.round(k.fontSize * Math.min(d, u))), m.segments = k.segments.map((E) => ({
+                  ...E,
+                  fontSize: E.fontSize ? Math.max(8, Math.round(E.fontSize * Math.min(d, u))) : void 0
                 }));
               } else m.type === "LINE" || m.type === "ARROW" ? (m.x2 = b.x2 * d, m.y2 = b.y2 * u) : m.type === "PATH" && (m.points = b.points.map((k) => ({
                 x: k.x * d,
@@ -1972,12 +1978,38 @@ class H extends HTMLElement {
       })
     };
   }
-  // 导出画布为 PNG 图片
+  // 导出画布为 PNG 图片（下载文件）
   exportPNG(t = "canvas-export.png") {
     if (!this.canvas) return;
     const i = document.createElement("a");
     i.download = t, i.href = this.canvas.toDataURL("image/png"), i.click();
   }
+  // 获取画布图片数据（返回 base64 或 Blob）
+  getImageData(t = {}) {
+    return new Promise((i, e) => {
+      if (!this.canvas) {
+        e(new Error("Canvas not initialized"));
+        return;
+      }
+      const {
+        format: s = "png",
+        quality: o = 0.92,
+        type: n = "dataURL",
+        background: r = "#ffffff"
+      } = t, h = document.createElement("canvas");
+      h.width = this.canvas.width, h.height = this.canvas.height;
+      const a = h.getContext("2d");
+      a.fillStyle = r, a.fillRect(0, 0, h.width, h.height), a.translate(this.panOffset.x, this.panOffset.y), a.scale(this.scale, this.scale), this.objects.forEach((c) => this.drawObject(a, c));
+      const l = `image/${s}`;
+      n === "blob" ? h.toBlob(
+        (c) => {
+          c ? i(c) : e(new Error("Failed to create blob"));
+        },
+        l,
+        o
+      ) : i(h.toDataURL(l, o));
+    });
+  }
   // ========== Tween动画系统方法 ==========
   // 创建动画 (使用 tweenAnimate 避免与 HTMLElement.animate 冲突)
   tweenAnimate(t, i, e = {}) {
@@ -2805,7 +2837,7 @@ class H extends HTMLElement {
   }
   // 更新 UI
   updateUI() {
-    var n, r, h, a;
+    var o, n, r, h;
     const t = this.shadow.querySelector(".selection-info");
     if (t)
       if (this.selectedIds.size > 0) {
@@ -2817,48 +2849,48 @@ class H extends HTMLElement {
             </svg>
           </button>
         `, t.classList.add("visible");
-        const l = t.querySelector(".delete-btn");
-        l && l.addEventListener("click", () => this.deleteSelected());
+        const a = t.querySelector(".delete-btn");
+        a && a.addEventListener("click", () => this.deleteSelected());
       } else if (this.selectedId) {
-        const l = this.objects.find((c) => c.id === this.selectedId);
-        if (l) {
-          const p = {
+        const a = this.objects.find((l) => l.id === this.selectedId);
+        if (a) {
+          const c = {
             RECTANGLE: "矩形",
             CIRCLE: "圆形",
             PATH: "画笔",
             TEXT: "文本",
             IMAGE: "图片"
-          }[l.type] || l.type;
+          }[a.type] || a.type;
           t.innerHTML = `
-            <span class="selection-label">${this.t("selected")}: ${p}</span>
+            <span class="selection-label">${this.t("selected")}: ${c}</span>
             <button class="delete-btn" title="${this.t("delete")}">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
               </svg>
             </button>
           `, t.classList.add("visible");
-          const d = t.querySelector(".delete-btn");
-          d && d.addEventListener("click", () => this.deleteSelected());
+          const p = t.querySelector(".delete-btn");
+          p && p.addEventListener("click", () => this.deleteSelected());
         }
       } else
         t.classList.remove("visible"), t.innerHTML = "";
     const i = this.shadow.querySelector(".filter-controls");
     if (i) {
-      const c = this.getSelectedObjects().find((p) => p.type === "IMAGE");
-      if (c) {
+      const l = this.getSelectedObjects().find((c) => c.type === "IMAGE");
+      if (l) {
         i.style.display = "flex";
-        const p = i.querySelector(".filter-brightness"), d = i.querySelector(".filter-contrast");
-        if (p) {
-          const u = ((n = c.filters) == null ? void 0 : n.brightness) ?? 100;
-          p.value = String(u);
-          const g = (r = p.parentElement) == null ? void 0 : r.querySelector(".filter-value");
-          g && (g.textContent = `${u}%`);
+        const c = i.querySelector(".filter-brightness"), p = i.querySelector(".filter-contrast");
+        if (c) {
+          const d = ((o = l.filters) == null ? void 0 : o.brightness) ?? 100;
+          c.value = String(d);
+          const u = (n = c.parentElement) == null ? void 0 : n.querySelector(".filter-value");
+          u && (u.textContent = `${d}%`);
         }
-        if (d) {
-          const u = ((h = c.filters) == null ? void 0 : h.contrast) ?? 100;
-          d.value = String(u);
-          const g = (a = d.parentElement) == null ? void 0 : a.querySelector(".filter-value");
-          g && (g.textContent = `${u}%`);
+        if (p) {
+          const d = ((r = l.filters) == null ? void 0 : r.contrast) ?? 100;
+          p.value = String(d);
+          const u = (h = p.parentElement) == null ? void 0 : h.querySelector(".filter-value");
+          u && (u.textContent = `${d}%`);
         }
       } else
         i.style.display = "none";
@@ -2866,9 +2898,20 @@ class H extends HTMLElement {
     const e = this.shadow.querySelector(".undo-btn");
     e && (e.disabled = this.history.length === 0);
     const s = this.shadow.querySelector(".redo-btn");
-    s && (s.disabled = this.redoHistory.length === 0);
-    const o = this.shadow.querySelector(".empty-hint");
-    o && (o.style.display = this.objects.length === 0 ? "flex" : "none");
+    s && (s.disabled = this.redoHistory.length === 0), this.updateEmptyHint();
+  }
+  // 更新空画布提示显示状态
+  updateEmptyHint() {
+    const t = this.shadow.querySelector(".empty-hint");
+    if (t) {
+      const i = this.objects.length > 0 || this.currentObject !== null;
+      t.style.display = i ? "none" : "flex";
+    }
+  }
+  // 立即隐藏空画布提示（用于开始绘制时）
+  hideEmptyHint() {
+    const t = this.shadow.querySelector(".empty-hint");
+    t && (t.style.display = "none");
   }
   // ========== 热区功能相关方法 ==========
   // 绑定热区相关事件
@@ -3588,10 +3631,10 @@ class H extends HTMLElement {
         const w = S.target.value;
         if (this.color = w, this.selectedId) {
           const v = this.objects.find((C) => C.id === this.selectedId);
-          v && (this.saveHistory(), v.color = w, this.renderCanvas(), this.dispatchChangeEvent());
+          v && (this.saveHistory(), this.updateObjectColor(v, w), this.renderCanvas(), this.dispatchChangeEvent());
         } else this.selectedIds.size > 0 && (this.saveHistory(), this.selectedIds.forEach((v) => {
           const C = this.objects.find((x) => x.id === v);
-          C && (C.color = w);
+          C && this.updateObjectColor(C, w);
         }), this.renderCanvas(), this.dispatchChangeEvent());
       };
       g.addEventListener("input", y), g.addEventListener("change", y);
@@ -3601,15 +3644,15 @@ class H extends HTMLElement {
     });
     const b = this.shadow.querySelector(".zoom-in-btn"), m = this.shadow.querySelector(".zoom-out-btn"), k = this.shadow.querySelector(".zoom-text");
     b && b.addEventListener("click", () => this.zoomIn()), m && m.addEventListener("click", () => this.zoomOut()), k && k.addEventListener("click", () => this.resetZoom());
-    const z = this.shadow.querySelector(".save-json-btn"), O = this.shadow.querySelector(".load-json-input"), R = this.shadow.querySelector(".export-png-btn");
-    z && z.addEventListener("click", () => this.saveJson()), O && O.addEventListener("change", (y) => this.loadJson(y)), R && R.addEventListener("click", () => this.exportPng());
-    const L = this.shadow.querySelector(".clear-canvas-btn"), E = this.shadow.querySelector(".clear-confirm-popup"), A = this.shadow.querySelector(".clear-confirm-yes"), $ = this.shadow.querySelector(".clear-confirm-no");
-    L && E && L.addEventListener("click", () => {
-      E.classList.toggle("show");
-    }), A && E && A.addEventListener("click", () => {
-      this.clearCanvas(), E.classList.remove("show");
-    }), $ && E && $.addEventListener("click", () => {
-      E.classList.remove("show");
+    const E = this.shadow.querySelector(".save-json-btn"), O = this.shadow.querySelector(".load-json-input"), R = this.shadow.querySelector(".export-png-btn");
+    E && E.addEventListener("click", () => this.saveJson()), O && O.addEventListener("change", (y) => this.loadJson(y)), R && R.addEventListener("click", () => this.exportPng());
+    const L = this.shadow.querySelector(".clear-canvas-btn"), z = this.shadow.querySelector(".clear-confirm-popup"), A = this.shadow.querySelector(".clear-confirm-yes"), $ = this.shadow.querySelector(".clear-confirm-no");
+    L && z && L.addEventListener("click", () => {
+      z.classList.toggle("show");
+    }), A && z && A.addEventListener("click", () => {
+      this.clearCanvas(), z.classList.remove("show");
+    }), $ && z && $.addEventListener("click", () => {
+      z.classList.remove("show");
     }), this.textInput && (this.textInput.addEventListener("keydown", (y) => {
       y.key === "Enter" ? (y.preventDefault(), this.submitText()) : y.key === "Escape" && this.hideTextInput();
     }), this.textInput.addEventListener("blur", () => {
@@ -3849,7 +3892,7 @@ class H extends HTMLElement {
   // 添加形状到画布
   addShapeToCanvas(t) {
     const i = (this.canvas.width / 2 - this.panOffset.x) / this.scale, e = (this.canvas.height / 2 - this.panOffset.y) / this.scale, s = t.width || 100, o = t.height || 100;
-    this.saveHistory();
+    this.saveHistory(), this.hideEmptyHint();
     let n;
     const r = t.fillMode === "stroke" ? t.strokeColor || t.fillColor || "#000000" : t.fillColor || t.strokeColor || "#000000";
     switch (t.type) {