ste-canvas-poster 1.0.0

package/package.json

@@ -0,0 +1,143 @@
+{
+  "id": "ste-canvas-poster",
+  "displayName": "ste-canvas-poster",
+  "name": "ste-canvas-poster",
+  "version": "1.0.0",
+  "description": "基于 Canvas 2D API 的声明式海报绘制引擎，支持微信小程序与 APP 双端",
+  "type": "module",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./types": {
+      "types": "./types.d.ts"
+    }
+  },
+  "keywords": [
+    "canvas",
+    "poster",
+    "uni-app",
+    "wechat-miniprogram",
+    "schema-driven",
+    "qrcode",
+    "flex-layout",
+    "canvas-poster",
+    "declarative"
+  ],
+  "repository": "https://github.com/wuhanshuzhiyun/ste-canvas-poster",
+  "engines": {
+    "HBuilderX": "^3.1.0",
+    "uni-app": "^3.1.0",
+    "uni-app-x": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "sdk",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "",
+      "data": "",
+      "permissions": ""
+    },
+    "npmurl": "https://www.npmjs.com/package/ste-canvas-poster",
+    "darkmode": "-",
+    "i18n": "-",
+    "widescreen": "-"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "n",
+        "aliyun": "n",
+        "alipay": "n"
+      },
+      "client": {
+        "uni-app": {
+          "vue": {
+            "vue2": "y",
+            "vue3": "y"
+          },
+          "web": {
+            "safari": "n",
+            "chrome": "n"
+          },
+          "app": {
+            "vue": "y",
+            "nvue": "n",
+            "android": "y",
+            "ios": "y",
+            "harmony": "-"
+          },
+          "mp": {
+            "weixin": "y",
+            "alipay": "n",
+            "toutiao": "n",
+            "baidu": "n",
+            "kuaishou": "n",
+            "jd": "n",
+            "harmony": "n",
+            "qq": "n",
+            "lark": "n",
+            "xhs": "n"
+          },
+          "quickapp": {
+            "huawei": "n",
+            "union": "n"
+          }
+        },
+        "uni-app-x": {
+          "web": {
+            "safari": "n",
+            "chrome": "n"
+          },
+          "app": {
+            "android": "-",
+            "ios": "-",
+            "harmony": "-"
+          },
+          "mp": {
+            "weixin": "-"
+          }
+        }
+      }
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "types.d.ts",
+    "CHANGELOG.md",
+    "README.md",
+    "LICENSE",
+    "src/measureText.js",
+    "src/posterAdapter.js",
+    "src/posterEngine.js",
+    "src/qrcodeGenerator.js"
+  ],
+  "license": "ISC",
+  "author": {
+    "name": "yajun.xu"
+  },
+  "bugs": {
+    "url": "https://github.com/wuhanshuzhiyun/ste-canvas-poster/issues"
+  },
+  "homepage": "https://github.com/wuhanshuzhiyun/ste-canvas-poster#readme",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/measureText.js

@@ -0,0 +1,53 @@
+const NARROW_CHARS = new Set([
+	0x69, 0x6c, 0x6a, 0x74, 0x66, 0x72, 0x2e, 0x2c, 0x3b, 0x3a, 0x21, 0x7c, 0x27, 0x60, 0xb4, 0x5e, 0x7e, 0x28, 0x29,
+	0x5b, 0x5d, 0x7b, 0x7d, 0x2f, 0x5c, 0x2d, 0x5f, 0x31,
+]);
+
+const WIDE_CHARS = new Set([
+	0x57, 0x4d, 0x40, 0x25, 0x26, 0x6d, 0x77, 0x4f, 0x51, 0x44, 0x48, 0x47, 0x4e, 0x52, 0x55, 0x56,
+]);
+
+function isFullWidth(code) {
+	return (
+		(code >= 0x4e00 && code <= 0x9fff) ||
+		(code >= 0x3400 && code <= 0x4dbf) ||
+		(code >= 0x3000 && code <= 0x303f) ||
+		(code >= 0xff01 && code <= 0xff60) ||
+		(code >= 0xfe30 && code <= 0xfe6f) ||
+		(code >= 0x2e80 && code <= 0x2fdf) ||
+		(code >= 0xf900 && code <= 0xfaff) ||
+		(code >= 0x2f800 && code <= 0x2fa1f) ||
+		(code >= 0xac00 && code <= 0xd7af) ||
+		(code >= 0x3040 && code <= 0x309f) ||
+		(code >= 0x30a0 && code <= 0x30ff) ||
+		(code >= 0xa000 && code <= 0xa48f) ||
+		(code >= 0xa490 && code <= 0xa4cf)
+	);
+}
+
+function getCharWidthRatio(code) {
+	if (isFullWidth(code)) return 1.0;
+	if (NARROW_CHARS.has(code)) return 0.33;
+	if (WIDE_CHARS.has(code)) return 0.78;
+	if (code >= 0x30 && code <= 0x39) return 0.55;
+	if ((code >= 0x41 && code <= 0x5a) || (code >= 0x61 && code <= 0x7a)) return 0.58;
+	if (code >= 0xc0 && code <= 0x24f) return 0.6;
+	if (code >= 0x2018 && code <= 0x201d) return 0.55;
+	if (code === 0x3000) return 1.0;
+	if (code === 0x200b || code === 0xfeff) return 0;
+	return 0.55;
+}
+
+/**
+ * 计算文本宽度
+ */
+export function measureText(text, fontSize, bold = false) {
+	if (!text || typeof text !== 'string') return 0;
+	let width = 0;
+	for (const char of text) {
+		const code = char.codePointAt(0);
+		width += getCharWidthRatio(code) * fontSize;
+	}
+	if (bold) width *= 1.06;
+	return Math.ceil(width);
+}

package/src/posterAdapter.js

@@ -0,0 +1,400 @@
+/**
+ * posterAdapter.js - 海报引擎双端适配层
+ * 版本：v0.0.1
+ *
+ * 功能：
+ *  1. 兼容微信小程序 / APP 两端获取 Canvas 2D 节点
+ *  2. 封装 renderPoster 高层 API
+ *  3. 自动处理图片路径解析（相对路径 → 完整 URL）
+ *  4. 自动处理 APP 端图片下载本地化
+ *
+ * 使用方式（业务层无需关心平台差异）：
+ *   const engine = await renderPoster({ schema, data, selector: '#myCanvas', vm: this });
+ *   await engine.saveToAlbum();
+ */
+
+import { PosterEngine } from "./posterEngine.js";
+
+// ─────────────────────────────────────────────
+// 工具函数
+// ─────────────────────────────────────────────
+
+/**
+ * 判断是否为完整 URL
+ * @param {string} src
+ * @returns {boolean}
+ */
+function isFullUrl(src) {
+  if (!src) return false;
+  return (
+    /^https?:\/\//i.test(src) ||
+    /^data:image/i.test(src) ||
+    /^wxfile:/i.test(src)
+  );
+}
+
+/**
+ * 解析图片路径（相对路径 → 完整 URL）
+ * @param {string} src
+ * @returns {string}
+ */
+function resolveImagePath(src) {
+  if (!src) return "";
+  if (isFullUrl(src)) return src;
+  // #ifdef APP-PLUS
+  if (/^(file:|\/var\/|\/storage\/)/i.test(src)) return src;
+  // #endif
+  return src;
+}
+
+/**
+ * 深度解析数据对象中的所有图片路径
+ * @param {Object} data
+ * @returns {Object}
+ */
+const IMAGE_KEY_SUFFIX_RE = /(Image|Img|Url|Src|Photo|Pic)$/i;
+const IMAGE_KEY_EXACT_RE = /^(background|qrcode|cover|avatar)$/i;
+
+function resolveDataImages(data) {
+  if (!data || typeof data !== "object") return data;
+
+  let resolved = null;
+  for (const [key, value] of Object.entries(data)) {
+    if (
+      typeof value === "string" &&
+      (IMAGE_KEY_SUFFIX_RE.test(key) || IMAGE_KEY_EXACT_RE.test(key))
+    ) {
+      const newPath = resolveImagePath(value);
+      if (newPath !== value) {
+        if (!resolved) {
+          resolved = { ...data };
+        }
+        resolved[key] = newPath;
+      }
+    }
+  }
+  return resolved || data;
+}
+
+// ─────────────────────────────────────────────
+// 辅助：rpx → px 转换
+// ─────────────────────────────────────────────
+
+let _windowWidth = null;
+
+function getWindowWidth() {
+  const current = uni.getSystemInfoSync().windowWidth;
+  _windowWidth = current;
+  return _windowWidth;
+}
+
+export function rpx2px(rpx) {
+  if (_windowWidth == null) {
+    _windowWidth = getWindowWidth();
+  }
+  return (rpx * _windowWidth) / 750;
+}
+
+export function px2rpx(px) {
+  if (_windowWidth == null) {
+    _windowWidth = getWindowWidth();
+  }
+  return (px * 750) / _windowWidth;
+}
+
+/**
+ * 将 Schema 中的 rpx 值转换为 px
+ * 业务层可以直接使用 rpx（如 750rpx），插件自动转换为当前屏幕的 px 值
+ * @param {Object} schema - 原始 schema（包含 rpx 值）
+ * @returns {Object} - 转换后的 schema（所有 rpx 转为 px）
+ */
+const NON_DIMENSION_KEYS = new Set([
+  "opacity",
+  "lines",
+  "flex",
+  "lineHeight",
+  "zIndex",
+  "dpr",
+]);
+
+function shouldTransform(val) {
+  if (typeof val === "number") return true;
+  if (typeof val === "string" && /^-?\d+(\.\d+)?$/.test(val)) return true;
+  return false;
+}
+
+function transformValue(val, scale) {
+  if (typeof val === "number") return Math.floor(val * scale);
+  if (typeof val === "string" && /^-?\d+(\.\d+)?$/.test(val)) {
+    return Math.floor(parseFloat(val) * scale);
+  }
+  return val;
+}
+
+function transformSchemaRpx(schema) {
+  if (!schema || typeof schema !== "object") return schema;
+  if (_windowWidth == null) {
+    _windowWidth = getWindowWidth() || 375;
+  }
+  const scale = _windowWidth / 750;
+
+  function traverseInPlace(obj) {
+    if (Array.isArray(obj)) {
+      for (let i = 0; i < obj.length; i++) {
+        traverseInPlace(obj[i]);
+      }
+      return;
+    }
+    if (!obj || typeof obj !== "object") return;
+    for (const key of Object.keys(obj)) {
+      const value = obj[key];
+      if (value && typeof value === "object") {
+        traverseInPlace(value);
+      } else if (shouldTransform(value)) {
+        if (NON_DIMENSION_KEYS.has(key) || (key === "fontWeight" && typeof value === "number")) {
+          continue;
+        }
+        obj[key] = transformValue(value, scale);
+      }
+    }
+  }
+
+  traverseInPlace(schema);
+  return schema;
+}
+
+// ─────────────────────────────────────────────
+// 辅助：APP 端图片预下载
+// ─────────────────────────────────────────────
+
+function downloadImageToLocal(url) {
+  if (!url) return Promise.resolve("");
+  if (/^wxfile:/i.test(url)) return Promise.resolve(url);
+  if (/^data:image/i.test(url)) return Promise.resolve(url);
+  // #ifdef APP-PLUS
+  if (/^(file:|\/var\/|\/storage\/)/i.test(url)) return Promise.resolve(url);
+  // #endif
+
+  return new Promise((resolve, reject) => {
+    uni.downloadFile({
+      url,
+      success: ({ tempFilePath, statusCode }) => {
+        if (statusCode >= 200 && statusCode < 300 && tempFilePath) {
+          resolve(tempFilePath);
+        } else {
+          console.error("[posterAdapter] 图片下载失败，状态码:", statusCode);
+          reject(new Error(`下载失败，状态码: ${statusCode}`));
+        }
+      },
+      fail: (err) => {
+        console.error("[posterAdapter] 图片下载失败", err);
+        reject(err);
+      },
+    });
+  });
+}
+
+/**
+ * 批量将 Schema 中的网络图片预下载到本地（APP 端专用）
+ * @param {Object} schema
+ * @param {Object} data    已解析过的数据
+ * @returns {Promise<Object>}  新的 data 对象，图片字段替换为本地路径
+ */
+async function preloadSchemaImages(schema, data = {}) {
+  // #ifdef MP-WEIXIN
+  return data;
+  // #endif
+
+  // #ifdef APP-PLUS
+  const newData = { ...data };
+  const promises = [];
+
+  // 判断是否需要下载：网络图片（http/https）需要下载，其他类型不需要
+  function shouldDownload(url) {
+    if (!url) return false;
+    return /^https?:\/\//.test(url);
+  }
+
+  function traverse(views = []) {
+    for (const node of views) {
+      if (node.type === "image" && node.src) {
+        const tplMatch = node.src.match(/\{\{(\w+)\}\}/);
+        if (tplMatch) {
+          const key = tplMatch[1];
+          const value = newData[key];
+          if (shouldDownload(value)) {
+            promises.push(
+              downloadImageToLocal(value)
+                .then((localPath) => {
+                  newData[key] = localPath;
+                })
+                .catch((err) => {
+                  console.warn(
+                    "[posterAdapter] 图片预下载失败，保留原值:",
+                    err,
+                  );
+                  // 下载失败保留原值
+                }),
+            );
+          }
+        }
+      }
+      if (node.views?.length) {
+        traverse(node.views);
+      }
+    }
+  }
+
+  traverse(schema.views || []);
+
+  if (schema.backgroundImage) {
+    const bgKey = (schema.backgroundImage.match(/\{\{(\w+)\}\}/) || [])[1];
+    if (bgKey && shouldDownload(newData[bgKey])) {
+      promises.push(
+        downloadImageToLocal(newData[bgKey])
+          .then((localPath) => {
+            newData[bgKey] = localPath;
+          })
+          .catch((err) => {
+            console.warn("[posterAdapter] 背景图预下载失败，保留原值:", err);
+            // 下载失败保留原值
+          }),
+      );
+}
+  }
+
+  await Promise.all(promises);
+  return newData;
+  // #endif
+}
+
+// ─────────────────────────────────────────────
+// 获取 Canvas 节点
+// ─────────────────────────────────────────────
+
+export function getCanvasNode(selector, vm) {
+  return new Promise((resolve, reject) => {
+    // #ifdef APP-PLUS
+    const canvasId = selector.replace("#", "");
+    const ctx = uni.createCanvasContext(canvasId, vm);
+    if (ctx) {
+      const sysInfo = uni.getSystemInfoSync();
+      const screenWidth = sysInfo.screenWidth || sysInfo.windowWidth || 375;
+      const rpxToPx = screenWidth / 750;
+      const defaultWidth = Math.floor(750 * rpxToPx);
+      const defaultHeight = Math.floor(1068 * rpxToPx);
+
+      const mockCanvas = {
+        width: defaultWidth,
+        height: defaultHeight,
+        getContext: (type) => (type === "2d" ? ctx : null),
+        createImage: () => {
+          // 构造一个与小程序端 canvas.createImage() 行为一致的图片对象
+          // 当 src 被赋值时，自动调用 uni.getImageInfo 加载图片尺寸并触发 onload
+          const img = {
+            width: 0,
+            height: 0,
+            onload: null,
+            onerror: null,
+          };
+          let _src = "";
+          Object.defineProperty(img, "src", {
+            get() {
+              return _src;
+            },
+            set(val) {
+              _src = val;
+              if (!val) return;
+              uni.getImageInfo({
+                src: val,
+                success: (res) => {
+                  img.width = res.width;
+                  img.height = res.height;
+                  if (img.onload) img.onload();
+                },
+                fail: (err) => {
+                  if (img.onerror) img.onerror(err);
+                },
+              });
+            },
+            enumerable: true,
+            configurable: true,
+          });
+          return img;
+        },
+        _canvasId: canvasId,
+        _vm: vm,
+      };
+      resolve(mockCanvas);
+      return;
+    }
+    // #endif
+
+    // #ifdef MP-WEIXIN
+    const query = uni.createSelectorQuery().in(vm);
+    query
+      .select(selector)
+      .node((res) => {
+        const node = res && res.node ? res.node : res;
+        if (node) {
+          resolve(node);
+        } else {
+          reject(new Error(`[posterAdapter] 未找到 Canvas 节点: ${selector}`));
+        }
+      })
+      .exec();
+    // #endif
+  });
+}
+
+// ─────────────────────────────────────────────
+// 高层 API
+// ─────────────────────────────────────────────
+
+/**
+ * 渲染海报（一步到位，自动处理路径解析和平台差异）
+ *
+ * @param {Object} options
+ * @param {Object}  options.schema    JSON Schema 对象（数值可直接使用 rpx）
+ * @param {Object}  [options.data]    模板变量数据（图片路径可以是相对路径）
+ * @param {string}  options.selector  Canvas 选择器（如 '#posterCanvas'）
+ * @param {Object}  options.vm        Vue 组件实例（this）
+ * @param {number}  [options.dpr]     像素比（可选，默认自动获取）
+ * @param {boolean} [options.useRpx]  是否将 schema 中的数值视为 rpx 并自动转换（默认 true）
+ * @returns {Promise<PosterEngine>}   返回引擎实例，供后续 save/share 使用
+ */
+export async function renderPoster({
+  schema,
+  data = {},
+  selector,
+  vm,
+  dpr,
+  useRpx = true,
+}) {
+  if (!selector) throw new Error("[posterAdapter] selector 不能为空");
+  if (!vm) throw new Error("[posterAdapter] vm 不能为空");
+
+  // 深拷贝 schema，避免修改用户传入的原始对象
+  const schemaCopy = JSON.parse(JSON.stringify(schema));
+
+  // 自动将 schema 中的 rpx 转换为 px（业务层可以直接使用设计稿的 rpx 值）
+  const transformedSchema = useRpx ? transformSchemaRpx(schemaCopy) : schemaCopy;
+
+  // 自动解析数据中的图片路径（相对路径 → 完整 URL）
+  const resolvedData = resolveDataImages(data);
+  let preloadedData = resolvedData;
+
+  // #ifdef APP-PLUS
+  preloadedData = await preloadSchemaImages(transformedSchema, resolvedData);
+  // #endif
+
+  const canvas = await getCanvasNode(selector, vm);
+  const engine = new PosterEngine({
+    canvas,
+    schema: transformedSchema,
+    data: preloadedData,
+    dpr,
+  });
+  await engine.render();
+  return engine;
+}