@mce/bigesj 0.16.6 → 0.16.7

package/dist/index.js

@@ -5554,238 +5554,6 @@ function convertSvgLinearGradient(value) {
     return `linear-gradient(${args.join(", ")})`;
   }
 }
-async function convertImageElementToUrl(el) {
-  const {
-    transform = {},
-    style = {},
-    maskUrl,
-    imageEffects = [],
-    imageEffectsRatio = 1
-  } = el;
-  const url = el.clipUrl || el.url;
-  const {
-    translateX = 0,
-    translateY = 0,
-    zoom = 1
-  } = transform ?? {};
-  const {
-    scaleX = 1,
-    scaleY = 1,
-    filter
-  } = style;
-  if (translateX === 0 && translateY === 0 && zoom === 1 && scaleX === 1 && scaleY === 1 && !maskUrl && !filter && !imageEffects.length) {
-    return url;
-  }
-  const img = await assets.fetchImageBitmap(url);
-  const {
-    originWidth = img.width,
-    originHeight = img.height,
-    imageWidth = originWidth,
-    imageHeight = originHeight
-  } = transform;
-  const {
-    width = originWidth,
-    height = originHeight
-  } = style;
-  const dpr = window.devicePixelRatio || 1;
-  const [canvas, ctx] = createCanvas(width, height, dpr);
-  if (filter)
-    ctx.filter = filter;
-  ctx.scale(scaleX, scaleY);
-  ctx.translate(scaleX < 0 ? -width : 0, scaleY < 0 ? -height : 0);
-  if (maskUrl) {
-    const mask = await assets.fetchImageBitmap(maskUrl);
-    ctx.drawImage(mask, 0, 0, mask.width, mask.height, 0, 0, width, height);
-    mask.close();
-    ctx.globalCompositeOperation = "source-in";
-  }
-  const dw = imageWidth * zoom;
-  const dh = imageHeight * zoom;
-  const dx = -(dw / 2 - imageWidth / 2) + translateX;
-  const dy = -(dh / 2 - imageHeight / 2) + translateY;
-  ctx.drawImage(img, 0, 0, img.width, img.height, dx, dy, dw, dh);
-  img.close();
-  ctx.globalCompositeOperation = "source-over";
-  if (imageEffects.length > 0) {
-    const scale = 0.9;
-    const center = {
-      x: (width - width * scale) / 2,
-      y: (height - height * scale) / 2
-    };
-    const canvasBitmap = await createImageBitmap(canvas);
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.scale(scale, scale);
-    for (let i = imageEffects.length - 1; i >= 0; i--) {
-      const { filling, offset, stroke } = imageEffects[i];
-      let effectCanvas = canvasBitmap;
-      if (filling) {
-        const [canvas1, ctx1] = createCanvas(width, height, dpr);
-        ctx1.drawImage(effectCanvas, 0, 0, width, height);
-        ctx1.globalCompositeOperation = "source-in";
-        if (filling.color) {
-          const [canvas2, ctx2] = createCanvas(width, height, dpr);
-          ctx2.fillStyle = filling.color;
-          ctx2.fillRect(0, 0, width, height);
-          ctx1.drawImage(canvas2, 0, 0, width, height);
-        } else if (filling.imageContent?.image) {
-          const img2 = await assets.fetchImageBitmap(filling.imageContent.image);
-          ctx1.drawImage(img2, 0, 0, width, height);
-          img2.close();
-        }
-        effectCanvas = canvas1;
-      }
-      stroke?.forEach(({ width: width2, color }) => {
-        effectCanvas = new ImageStroke().use((ctx2, image, options) => {
-          const [, ctx1] = createCanvas(image.width, image.height);
-          ctx1.drawImage(image, 0, 0);
-          const paths = getContours(ctx1);
-          const x = options.thickness;
-          const y = options.thickness;
-          ctx2.strokeStyle = options.color;
-          ctx2.lineWidth = options.thickness * 2;
-          ctx2.lineJoin = "round";
-          paths.forEach((path) => {
-            ctx2.beginPath();
-            ctx2.moveTo(x + path[0].x, y + path[1].y);
-            for (let i2 = 1; i2 < path.length; i2++) {
-              ctx2.lineTo(x + path[i2].x, y + path[i2].y);
-            }
-            ctx2.closePath();
-          });
-          ctx2.stroke();
-        }).make(effectCanvas, {
-          color,
-          thickness: width2 / 50 * imageEffectsRatio
-        });
-      });
-      if (offset) {
-        let { x, y } = offset;
-        x = x / 50 * imageEffectsRatio * 200;
-        y = y / 50 * imageEffectsRatio * 200;
-        ctx.drawImage(effectCanvas, x + center.x, y + center.y, width, height);
-      } else {
-        ctx.drawImage(effectCanvas, center.x, center.y, width, height);
-      }
-    }
-    canvasBitmap.close();
-  }
-  return await new Promise((resolve) => {
-    canvas.toBlob((blob) => {
-      try {
-        resolve(URL.createObjectURL(blob));
-      } catch (e) {
-        console.error(`Failed to URL.createObjectURL, url: ${url}`, e);
-        resolve(url);
-      }
-    });
-  });
-}
-function createCanvas(width, height, ratio = 1) {
-  const canvas = document.createElement("canvas");
-  canvas.width = width * ratio;
-  canvas.height = height * ratio;
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
-  const ctx = canvas.getContext("2d");
-  ctx.scale(ratio, ratio);
-  return [canvas, ctx];
-}
-class ImageStroke {
-  canvas = document.createElement("canvas");
-  method;
-  use(method) {
-    this.method = method;
-    return this;
-  }
-  make(image, options) {
-    const { canvas } = this;
-    const ctx = this.canvas.getContext("2d");
-    const strokeSize = options.thickness * 2;
-    const [resultWidth, resultHeight] = [image.width, image.height].map((val) => val + strokeSize);
-    if (resultWidth !== canvas.width || resultHeight !== canvas.height) {
-      canvas.width = resultWidth;
-      canvas.height = resultHeight;
-    }
-    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-    this.method(ctx, image, options);
-    ctx.drawImage(image, options.thickness, options.thickness);
-    return canvas;
-  }
-}
-function getContours(ctx) {
-  const cx = 0;
-  const cy = 0;
-  const canvasWidth = ctx.canvas.width;
-  const canvasHeight = ctx.canvas.height;
-  const paths = [];
-  let lastPos = 3;
-  const alpha = 100;
-  const trace = () => {
-    const path = [];
-    const data = new Uint32Array(ctx.getImageData(cx, cy, canvasWidth, canvasHeight).data.buffer);
-    let x;
-    let y;
-    let startX;
-    let startY;
-    let startPos = -1;
-    let step;
-    let prevStep = 9;
-    const steps = [9, 0, 3, 3, 2, 0, 9, 3, 1, 9, 1, 1, 2, 0, 2, 9];
-    function getState(x2, y2) {
-      return x2 >= 0 && y2 >= 0 && x2 < canvasWidth && y2 < canvasHeight ? data[y2 * canvasWidth + x2] >>> 24 > alpha : false;
-    }
-    function getNextStep(x2, y2) {
-      let v = 0;
-      if (getState(x2 - 1, y2 - 1)) {
-        v += 1;
-      }
-      if (getState(x2, y2 - 1)) {
-        v += 2;
-      }
-      if (getState(x2 - 1, y2)) {
-        v += 4;
-      }
-      if (getState(x2, y2)) {
-        v += 8;
-      }
-      if (v === 6)
-        return prevStep === 0 ? 2 : 3;
-      else if (v === 9)
-        return prevStep === 3 ? 0 : 1;
-      else
-        return steps[v];
-    }
-    for (let i = lastPos; i < data.length; i++) {
-      if (data[i] >>> 24 > alpha) {
-        startPos = lastPos = i;
-        break;
-      }
-    }
-    if (startPos >= 0) {
-      x = startX = startPos % canvasWidth;
-      y = startY = Math.floor(startPos / canvasWidth);
-      do {
-        step = getNextStep(x, y);
-        if (step === 0)
-          y--;
-        else if (step === 1)
-          y++;
-        else if (step === 2)
-          x--;
-        else if (step === 3)
-          x++;
-        if (step !== prevStep) {
-          path.push({ x: x + cx, y: y + cy });
-          prevStep = step;
-        }
-      } while (x !== startX || y !== startY);
-    }
-    paths.push(path);
-    return path;
-  };
-  trace();
-  return paths;
-}
 async function convertSvgElementToUrl(el) {
   const {
     id,
@@ -5849,15 +5617,7 @@ async function convertSvgElementToUrl(el) {
     svg.setAttribute("width", String(style.width * 2));
   if (style.height)
     svg.setAttribute("height", String(style.height * 2));
-  return await convertImageElementToUrl({
-    ...el,
-    transform: {
-      ...el.transform,
-      originWidth: style.width,
-      originHeight: style.height
-    },
-    url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg.outerHTML)}`
-  });
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg.outerHTML)}`;
 }
 const highlightReferImage = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNzIgNzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDcyIDcyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTE5LjMsMzguMWMwLjIsMC41LDAuNCwwLjksMC43LDEuNGMwLjIsMC4zLDAuNCwwLjQsMC44LDAuNGMwLjMsMCwwLjUtMC4xLDAuNi0wLjRjMC4xLTAuMywwLjEtMC42LDAuMi0wLjkgICBjMC0wLjIsMC4xLTAuNCwwLjMtMC41YzAuMi0wLjEsMC40LTAuMiwwLjYtMC4xYzAuMiwwLDAuNCwwLjEsMC41LDAuM2MwLjEsMC4yLDAuMiwwLjQsMC4xLDAuNmMtMC4xLDAuNi0wLjIsMS4yLTAuNCwxLjcgICBjLTAuMywwLjgtMC45LDEuMi0xLjcsMS4yYy0wLjksMC0xLjYtMC40LTIuMS0xLjJjLTAuMy0wLjQtMC41LTAuOC0wLjctMS4zYy0wLjQsMC4zLTEsMC42LTEuNywxYy0wLjUsMC4yLTAuOCwwLjEtMS4xLTAuMyAgIGMtMC4yLTAuNS0wLjEtMC45LDAuMy0xLjFjMC43LTAuNCwxLjQtMC44LDEuOS0xLjFjLTAuMi0wLjktMC40LTIuMS0wLjUtMy43TDE1LjksMzRjLTAuMiwwLTAuNCwwLTAuNi0wLjEgICBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4yLDAtMC40LDAuMi0wLjZzMC4zLTAuMywwLjUtMC4zbDEuMi0wLjFjLTAuMS0wLjktMC4xLTEuOS0wLjEtMi45YzAtMC4yLDAuMS0wLjQsMC4yLTAuNiAgIGMwLjItMC4xLDAuMy0wLjIsMC42LTAuMmMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4yLDAuMSwwLjIsMC4zLDAuMywwLjZjMCwwLjEsMCwxLDAuMSwyLjdsMy4yLTAuNGMwLjIsMCwwLjQsMCwwLjUsMC4xICAgYzAuMiwwLjEsMC4zLDAuMywwLjMsMC41czAsMC40LTAuMSwwLjVjLTAuMSwwLjItMC4zLDAuMy0wLjUsMC4zbC0zLjMsMC40YzAuMSwxLjIsMC4yLDIuMSwwLjMsMi44YzAuNy0wLjYsMS40LTEuNCwyLTIuMiAgIGMwLjMtMC40LDAuNy0wLjQsMS4xLTAuMmMwLjQsMC4zLDAuNCwwLjcsMC4yLDFDMjEuMywzNi4zLDIwLjQsMzcuMywxOS4zLDM4LjF6IE0yMC42LDMxLjFjLTAuMy0wLjItMC43LTAuNS0xLjEtMC44ICAgYy0wLjMtMC4zLTAuMy0wLjYtMC4xLTAuOWMwLjMtMC4zLDAuNi0wLjQsMS0wLjJjMC40LDAuMiwwLjcsMC41LDEuMSwwLjdjMC40LDAuMywwLjQsMC42LDAuMiwxQzIxLjMsMzEuMywyMSwzMS4zLDIwLjYsMzEuMXogICAgTTIzLjMsMzAuOWMwLTAuMiwwLjEtMC40LDAuMi0wLjVjMC4xLTAuMSwwLjMtMC4yLDAuNi0wLjJzMC40LDAuMSwwLjYsMC4yYzAuMSwwLjEsMC4yLDAuMywwLjIsMC41djYuNWMwLDAuMi0wLjEsMC40LTAuMiwwLjUgICBjLTAuMSwwLjEtMC4zLDAuMi0wLjYsMC4ycy0wLjQtMC4xLTAuNi0wLjJjLTAuMS0wLjEtMC4yLTAuMy0wLjItMC41VjMwLjl6IE0yNC4zLDQxLjZjLTAuMiwwLTAuNC0wLjEtMC42LTAuMiAgIGMtMC4yLTAuMS0wLjItMC4zLTAuMi0wLjZjMC0wLjIsMC4xLTAuNCwwLjItMC42YzAuMi0wLjEsMC4zLTAuMiwwLjYtMC4yaDAuOWMwLjYsMCwxLTAuNCwxLTEuMXYtOS40YzAtMC4yLDAuMS0wLjQsMC4yLTAuNiAgIGMwLjItMC4xLDAuMy0wLjIsMC42LTAuMmMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4yLDAuMSwwLjIsMC4zLDAuMiwwLjZWMzljMCwwLjgtMC4yLDEuNS0wLjcsMS45cy0xLjEsMC43LTEuOCwwLjdIMjQuM3oiLz4KCTxwYXRoIGQ9Ik00MC42LDM3LjdoLTMuOHYwLjdoNC40YzAuMSwwLDAuMywwLjEsMC40LDAuMmMwLjEsMC4xLDAuMiwwLjIsMC4yLDAuNGMwLDAuMS0wLjEsMC4zLTAuMiwwLjRjLTAuMSwwLjEtMC4yLDAuMi0wLjQsMC4yICAgaC00LjR2MC43SDQyYzAuMiwwLDAuMywwLjEsMC40LDAuMmMwLjEsMC4xLDAuMiwwLjIsMC4yLDAuNHMtMC4xLDAuMy0wLjIsMC40Yy0wLjEsMC4xLTAuMiwwLjItMC40LDAuMkgzMGMtMC4yLDAtMC4zLTAuMS0wLjQtMC4yICAgYy0wLjEtMC4xLTAuMi0wLjItMC4yLTAuNHMwLjEtMC4zLDAuMi0wLjRjMC4xLTAuMSwwLjItMC4yLDAuNC0wLjJoNS4ydi0wLjdoLTQuNGMtMC4xLDAtMC4zLTAuMS0wLjQtMC4ycy0wLjItMC4yLTAuMi0wLjQgICBjMC0wLjEsMC4xLTAuMywwLjItMC40czAuMi0wLjIsMC40LTAuMmg0LjR2LTAuN2gtMy43aDBjLTAuMiwwLTAuNC0wLjEtMC42LTAuMnMtMC4yLTAuMy0wLjItMC42di0zLjFjMC0wLjIsMC4xLTAuNCwwLjItMC42ICAgYzAuMS0wLjEsMC4zLTAuMiwwLjYtMC4yaDMuOHYtMC44SDMwYy0wLjIsMC0wLjMtMC4xLTAuNC0wLjJjLTAuMS0wLjEtMC4yLTAuMi0wLjItMC40czAuMS0wLjMsMC4yLTAuNGMwLjEtMC4xLDAuMi0wLjIsMC40LTAuMiAgIGg1LjJ2LTAuOGMtMS40LDAtMi45LDAuMS00LjMsMC4xYy0wLjIsMC0wLjMsMC0wLjQtMC4xYy0wLjEtMC4xLTAuMi0wLjItMC4yLTAuNGMwLTAuMiwwLTAuMywwLjItMC40YzAuMS0wLjEsMC4zLTAuMiwwLjQtMC4yICAgYzMuMywwLDYuOC0wLjEsMTAuMi0wLjNjMC4yLDAsMC4zLDAsMC40LDAuMmMwLjEsMC4xLDAuMiwwLjMsMC4yLDAuNGMwLDAuMiwwLDAuMy0wLjEsMC40Yy0wLjEsMC4xLTAuMiwwLjItMC40LDAuMiAgIGMtMS4xLDAtMi41LDAuMS00LjMsMC4xdjAuOGg1LjFjMC4yLDAsMC4zLDAuMSwwLjQsMC4yYzAuMSwwLjEsMC4yLDAuMiwwLjIsMC40cy0wLjEsMC4zLTAuMiwwLjRjLTAuMSwwLjEtMC4yLDAuMi0wLjQsMC4yaC01LjEgICB2MC44aDMuOGMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjZ2My4xYzAsMC4yLTAuMSwwLjQtMC4yLDAuNkM0MSwzNy43LDQwLjgsMzcuNyw0MC42LDM3Ljd6IE0zNS4xLDM0LjlWMzQgICBoLTIuOXYwLjlIMzUuMXogTTM1LjEsMzYuN3YtMC45aC0yLjl2MC45SDM1LjF6IE0zOS44LDM0LjlWMzRoLTIuOXYwLjlIMzkuOHogTTM5LjgsMzYuN3YtMC45aC0yLjl2MC45SDM5Ljh6Ii8+Cgk8cGF0aCBkPSJNNDUuNSw0MS4xYy0wLjMsMC40LTAuNywwLjUtMS4xLDAuM2MtMC40LTAuMy0wLjUtMC43LTAuMy0xLjFsMS0xLjdjMC4zLTAuNCwwLjctMC41LDEuMS0wLjNjMC40LDAuMywwLjUsMC43LDAuMywxLjEgICBMNDUuNSw0MS4xeiBNNTUsMzcuN2MtMC4xLDAtMC4xLDAtMC4yLDBoLTguOWMtMC4zLDAtMC41LTAuMS0wLjYtMC4yYy0wLjItMC4yLTAuMi0wLjQtMC4yLTAuNnYtMy40YzAtMC4yLDAuMS0wLjQsMC4yLTAuNiAgIGMwLjEtMC4xLDAuMy0wLjIsMC42LTAuMmgzLjN2LTMuMWMwLTAuMiwwLjEtMC40LDAuMi0wLjZjMC4yLTAuMiwwLjQtMC4yLDAuNi0wLjJzMC40LDAuMSwwLjYsMC4yYzAuMiwwLjIsMC4yLDAuNCwwLjIsMC42djAuM0g1NiAgIGMwLjIsMCwwLjQsMC4xLDAuNiwwLjJjMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjZzLTAuMSwwLjQtMC4yLDAuNWMtMC4xLDAuMS0wLjMsMC4yLTAuNiwwLjJoLTUuMnYxLjNoNGMwLjIsMCwwLjQsMC4xLDAuNiwwLjIgICBjMC4xLDAuMSwwLjIsMC4zLDAuMiwwLjZ2My40QzU1LjYsMzcuMyw1NS40LDM3LjYsNTUsMzcuN3ogTTUzLjksMzYuMnYtMmgtNy4xdjJINTMuOXogTTQ5LjYsNDAuN2MwLDAuMy0wLjEsMC41LTAuMiwwLjYgICBjLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4yYy0wLjIsMC0wLjQtMC4xLTAuNi0wLjJjLTAuMS0wLjItMC4yLTAuNC0wLjItMC42bDAtMS42YzAtMC4yLDAuMS0wLjQsMC4yLTAuNmMwLjItMC4yLDAuMy0wLjIsMC42LTAuMiAgIHMwLjQsMC4xLDAuNiwwLjJjMC4yLDAuMiwwLjIsMC40LDAuMiwwLjZWNDAuN3ogTTUyLjgsNDAuN2MwLDAuMi0wLjEsMC40LTAuMiwwLjZjLTAuMiwwLjEtMC40LDAuMi0wLjYsMC4yICAgYy0wLjIsMC0wLjQtMC4xLTAuNi0wLjJjLTAuMi0wLjEtMC4yLTAuMy0wLjItMC42bDAtMS42YzAtMC4yLDAuMS0wLjQsMC4yLTAuNmMwLjItMC4yLDAuMy0wLjIsMC42LTAuMmMwLjIsMCwwLjQsMC4xLDAuNiwwLjIgICBjMC4yLDAuMiwwLjIsMC40LDAuMiwwLjZWNDAuN3ogTTU2LjYsNDAuM2MwLjIsMC40LDAuMSwwLjgtMC4zLDEuMWMtMC41LDAuMy0wLjgsMC4yLTEuMS0wLjNsLTEtMS43Yy0wLjItMC41LTAuMS0wLjgsMC4zLTEuMSAgIGMwLjUtMC4yLDAuOS0wLjEsMS4xLDAuM0w1Ni42LDQwLjN6Ii8+CjwvZz4KPC9zdmc+";
 function convertTextStyle(el, isByWord = false) {
@@ -6336,6 +6096,238 @@ async function convertDoc(doc, options = {}) {
     }
   };
 }
+async function convertImageElementToUrl(el) {
+  const {
+    transform = {},
+    style = {},
+    maskUrl,
+    imageEffects = [],
+    imageEffectsRatio = 1
+  } = el;
+  const url = el.clipUrl || el.url;
+  const {
+    translateX = 0,
+    translateY = 0,
+    zoom = 1
+  } = transform ?? {};
+  const {
+    scaleX = 1,
+    scaleY = 1,
+    filter
+  } = style;
+  if (translateX === 0 && translateY === 0 && zoom === 1 && scaleX === 1 && scaleY === 1 && !maskUrl && !filter && !imageEffects.length) {
+    return url;
+  }
+  const img = await assets.fetchImageBitmap(url);
+  const {
+    originWidth = img.width,
+    originHeight = img.height,
+    imageWidth = originWidth,
+    imageHeight = originHeight
+  } = transform;
+  const {
+    width = originWidth,
+    height = originHeight
+  } = style;
+  const dpr = window.devicePixelRatio || 1;
+  const [canvas, ctx] = createCanvas(width, height, dpr);
+  if (filter)
+    ctx.filter = filter;
+  ctx.scale(scaleX, scaleY);
+  ctx.translate(scaleX < 0 ? -width : 0, scaleY < 0 ? -height : 0);
+  if (maskUrl) {
+    const mask = await assets.fetchImageBitmap(maskUrl);
+    ctx.drawImage(mask, 0, 0, mask.width, mask.height, 0, 0, width, height);
+    mask.close();
+    ctx.globalCompositeOperation = "source-in";
+  }
+  const dw = imageWidth * zoom;
+  const dh = imageHeight * zoom;
+  const dx = -(dw / 2 - imageWidth / 2) + translateX;
+  const dy = -(dh / 2 - imageHeight / 2) + translateY;
+  ctx.drawImage(img, 0, 0, img.width, img.height, dx, dy, dw, dh);
+  img.close();
+  ctx.globalCompositeOperation = "source-over";
+  if (imageEffects.length > 0) {
+    const scale = 0.9;
+    const center = {
+      x: (width - width * scale) / 2,
+      y: (height - height * scale) / 2
+    };
+    const canvasBitmap = await createImageBitmap(canvas);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.scale(scale, scale);
+    for (let i = imageEffects.length - 1; i >= 0; i--) {
+      const { filling, offset, stroke } = imageEffects[i];
+      let effectCanvas = canvasBitmap;
+      if (filling) {
+        const [canvas1, ctx1] = createCanvas(width, height, dpr);
+        ctx1.drawImage(effectCanvas, 0, 0, width, height);
+        ctx1.globalCompositeOperation = "source-in";
+        if (filling.color) {
+          const [canvas2, ctx2] = createCanvas(width, height, dpr);
+          ctx2.fillStyle = filling.color;
+          ctx2.fillRect(0, 0, width, height);
+          ctx1.drawImage(canvas2, 0, 0, width, height);
+        } else if (filling.imageContent?.image) {
+          const img2 = await assets.fetchImageBitmap(filling.imageContent.image);
+          ctx1.drawImage(img2, 0, 0, width, height);
+          img2.close();
+        }
+        effectCanvas = canvas1;
+      }
+      stroke?.forEach(({ width: width2, color }) => {
+        effectCanvas = new ImageStroke().use((ctx2, image, options) => {
+          const [, ctx1] = createCanvas(image.width, image.height);
+          ctx1.drawImage(image, 0, 0);
+          const paths = getContours(ctx1);
+          const x = options.thickness;
+          const y = options.thickness;
+          ctx2.strokeStyle = options.color;
+          ctx2.lineWidth = options.thickness * 2;
+          ctx2.lineJoin = "round";
+          paths.forEach((path) => {
+            ctx2.beginPath();
+            ctx2.moveTo(x + path[0].x, y + path[1].y);
+            for (let i2 = 1; i2 < path.length; i2++) {
+              ctx2.lineTo(x + path[i2].x, y + path[i2].y);
+            }
+            ctx2.closePath();
+          });
+          ctx2.stroke();
+        }).make(effectCanvas, {
+          color,
+          thickness: width2 / 50 * imageEffectsRatio
+        });
+      });
+      if (offset) {
+        let { x, y } = offset;
+        x = x / 50 * imageEffectsRatio * 200;
+        y = y / 50 * imageEffectsRatio * 200;
+        ctx.drawImage(effectCanvas, x + center.x, y + center.y, width, height);
+      } else {
+        ctx.drawImage(effectCanvas, center.x, center.y, width, height);
+      }
+    }
+    canvasBitmap.close();
+  }
+  return await new Promise((resolve) => {
+    canvas.toBlob((blob) => {
+      try {
+        resolve(URL.createObjectURL(blob));
+      } catch (e) {
+        console.error(`Failed to URL.createObjectURL, url: ${url}`, e);
+        resolve(url);
+      }
+    });
+  });
+}
+function createCanvas(width, height, ratio = 1) {
+  const canvas = document.createElement("canvas");
+  canvas.width = width * ratio;
+  canvas.height = height * ratio;
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  const ctx = canvas.getContext("2d");
+  ctx.scale(ratio, ratio);
+  return [canvas, ctx];
+}
+class ImageStroke {
+  canvas = document.createElement("canvas");
+  method;
+  use(method) {
+    this.method = method;
+    return this;
+  }
+  make(image, options) {
+    const { canvas } = this;
+    const ctx = this.canvas.getContext("2d");
+    const strokeSize = options.thickness * 2;
+    const [resultWidth, resultHeight] = [image.width, image.height].map((val) => val + strokeSize);
+    if (resultWidth !== canvas.width || resultHeight !== canvas.height) {
+      canvas.width = resultWidth;
+      canvas.height = resultHeight;
+    }
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    this.method(ctx, image, options);
+    ctx.drawImage(image, options.thickness, options.thickness);
+    return canvas;
+  }
+}
+function getContours(ctx) {
+  const cx = 0;
+  const cy = 0;
+  const canvasWidth = ctx.canvas.width;
+  const canvasHeight = ctx.canvas.height;
+  const paths = [];
+  let lastPos = 3;
+  const alpha = 100;
+  const trace = () => {
+    const path = [];
+    const data = new Uint32Array(ctx.getImageData(cx, cy, canvasWidth, canvasHeight).data.buffer);
+    let x;
+    let y;
+    let startX;
+    let startY;
+    let startPos = -1;
+    let step;
+    let prevStep = 9;
+    const steps = [9, 0, 3, 3, 2, 0, 9, 3, 1, 9, 1, 1, 2, 0, 2, 9];
+    function getState(x2, y2) {
+      return x2 >= 0 && y2 >= 0 && x2 < canvasWidth && y2 < canvasHeight ? data[y2 * canvasWidth + x2] >>> 24 > alpha : false;
+    }
+    function getNextStep(x2, y2) {
+      let v = 0;
+      if (getState(x2 - 1, y2 - 1)) {
+        v += 1;
+      }
+      if (getState(x2, y2 - 1)) {
+        v += 2;
+      }
+      if (getState(x2 - 1, y2)) {
+        v += 4;
+      }
+      if (getState(x2, y2)) {
+        v += 8;
+      }
+      if (v === 6)
+        return prevStep === 0 ? 2 : 3;
+      else if (v === 9)
+        return prevStep === 3 ? 0 : 1;
+      else
+        return steps[v];
+    }
+    for (let i = lastPos; i < data.length; i++) {
+      if (data[i] >>> 24 > alpha) {
+        startPos = lastPos = i;
+        break;
+      }
+    }
+    if (startPos >= 0) {
+      x = startX = startPos % canvasWidth;
+      y = startY = Math.floor(startPos / canvasWidth);
+      do {
+        step = getNextStep(x, y);
+        if (step === 0)
+          y--;
+        else if (step === 1)
+          y++;
+        else if (step === 2)
+          x--;
+        else if (step === 3)
+          x++;
+        if (step !== prevStep) {
+          path.push({ x: x + cx, y: y + cy });
+          prevStep = step;
+        }
+      } while (x !== startX || y !== startY);
+    }
+    paths.push(path);
+    return path;
+  };
+  trace();
+  return paths;
+}
 function bidTidLoader(editor, api) {
   const {
     config,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mce/bigesj",
   "type": "module",
-  "version": "0.16.6",
+  "version": "0.16.7",
   "description": "Plugin for mce",
   "author": "wxm",
   "license": "MIT",
@@ -49,7 +49,7 @@
     "modern-openxml": "^1.10.1"
   },
   "devDependencies": {
-    "mce": "0.16.6"
+    "mce": "0.16.7"
   },
   "peerDependencies": {
     "mce": "^0"