✨ feat: 可正常解析内联图片

Author: arvinxx

src/function/nodeToGroup.ts

@@ -71,6 +71,7 @@ const nodeToGroup = (node: Element, options?: Options): Group => {
     group.layers.length === 1 &&
     (group.layers[0].class === 'rectangle' ||
       group.layers[0].class === 'text' ||
+      group.layers[0].class === 'bitmap' ||
       group.layers[0].class === 'svg' ||
       group.layers[0].class === 'group')
   ) {

src/function/nodeToLayers.ts

@@ -1,17 +1,22 @@
 /* eslint-disable no-console */
 import { defaultNodeStyle } from '../model/utils';
+import { Text } from '../model';
 
 import parserToSvg from '../parser/svg';
-import transferToShape from '../parser/shape';
-import transferToText from '../parser/text';
+import parserToShape from '../parser/shape';
+import parserToText from '../parser/text';
 import parserPseudoText from '../parser/pseudoText';
 import parserPseudoShape from '../parser/pseudoShape';
 
+import { AnyLayer } from '..';
 import { isTextVisible } from '../utils/visibility';
-import { isTextNode } from '../utils/nodeType';
-import { Text } from '../model';
-import { AnyLayer } from '../type';
+import {
+  isImageNode,
+  isSVGDescendantNode,
+  isTextNode,
+} from '../utils/nodeType';
 import { isExistPseudoText, isExistPseudoShape } from '../utils/shape';
+import parserToImage from '../parser/image';
 
 /**
  * 是否是默认样式
@@ -26,12 +31,6 @@ const isDefaultStyles = (styles: CSSStyleDeclaration) =>
     return defaultValue === value;
   });
 
-/**
- * 是否是 SVG 的子级
- */
-const isSVGDescendant = (node: Element) =>
-  node instanceof SVGElement && node.matches('svg *');
-
 /**
  * 将节点转为 Layer 对象
  * @param {HTMLElement} node 节点
@@ -44,15 +43,19 @@ const nodeToLayers = (node: Element): AnyLayer[] => {
 
   // ----- 初步判断 ------ //
   // skip Svg child nodes as they are already covered by `new Svg(…)`
-  if (isSVGDescendant(node)) {
+  if (isSVGDescendantNode(node)) {
     console.log('SVG 内部节点,跳过...');
     return layers;
   }
 
   // ---------- 处理子节点 ---------- //
 
-  // 使用 Rect 类, 图片填充到 Fill 里
-  const isImage = nodeName === 'img' && (node as HTMLImageElement).currentSrc;
+  if (isImageNode(node)) {
+    const image = parserToImage(<HTMLImageElement>node);
+    layers.push(image);
+    return layers;
+  }
+
   // 图层存在样式(阴影 边框等) 使用 Rect 类
   const isShape = !isDefaultStyles(styles);
   // 使用 SVG 类
@@ -61,17 +64,17 @@ const nodeToLayers = (node: Element): AnyLayer[] => {
   const isText = isTextNode(node);
 
   // 如果图层存在样式(阴影 边框等 返回 shape 节点
-  if (isImage || isShape || isExistPseudoShape(node)) {
+  if (isShape || isExistPseudoShape(node)) {
     // 判断一下是否有伪类
     const afterEl = parserPseudoShape(node, 'after');
 
     if (afterEl) {
       layers.push(afterEl);
     }
 
-    if (isImage || isShape) {
+    if (isShape) {
       // 添加后继续执行,不终止
-      const shape = transferToShape(node);
+      const shape = parserToShape(node);
 
       console.info('转换为:', shape);
       layers.push(shape);
@@ -102,7 +105,7 @@ const nodeToLayers = (node: Element): AnyLayer[] => {
   if (isText || isExistPseudoText(node)) {
     let text;
     if (isText) {
-      text = transferToText(node);
+      text = parserToText(node);
       console.info('转换为:', text);
       if (text instanceof Array) {
         for (let i = 0; i < text.length; i += 1) {

src/model/Layer/Bitmap.ts

@@ -1,6 +1,8 @@
 import SketchFormat from '@sketch-hq/sketch-file-format-ts';
 import BaseLayer, { BaseLayerParams } from '../Base/BaseLayer';
-import { sketchImage, defaultExportOptions } from '../utils';
+import { defaultExportOptions } from '../utils';
+import { getBase64ImageString } from '../../utils/url';
+import { uuid } from '../../utils/utils';
 
 interface BitmapInitParams extends BaseLayerParams {
   url: string;
@@ -16,6 +18,9 @@ class Bitmap extends BaseLayer {
       url.indexOf('data:') === 0 ? Bitmap.ensureBase64DataURL(url) : url;
   }
 
+  /**
+   * base64 的
+   */
   url: string;
 
   /**
@@ -26,7 +31,7 @@ class Bitmap extends BaseLayer {
     do_objectID: this.id,
     frame: this.frame.toSketchJSON(),
     style: this.style.toSketchJSON(),
-    image: sketchImage(this.url),
+    image: this.toSketchImageJSON(),
     booleanOperation: SketchFormat.BooleanOperation.NA,
     exportOptions: defaultExportOptions,
     clippingMask: '',
@@ -51,11 +56,19 @@ class Bitmap extends BaseLayer {
   /**
    * 转换为 Sketch 引用 JSON 对象
    * */
-  toSketchRefJSON = (): SketchFormat.FileRef => {
+  toSketchImageJSON = (): SketchFormat.DataRef => {
+    const base64 = getBase64ImageString(this.url);
+    if (!base64) throw Error('不正确的图像网址');
     return {
-      _class: 'MSJSONFileReference',
+      _class: 'MSJSONOriginalDataReference',
       _ref_class: 'MSImageData',
-      _ref: `images/${this.url}`,
+      _ref: `images/${uuid()}`,
+      data: {
+        _data: base64,
+      },
+      sha1: {
+        _data: '',
+      },
     };
   };
 

src/parser/image.ts

@@ -1,20 +1,50 @@
-import {
-  Bitmap,
-  // Svg
-} from '../model';
+import { Bitmap } from '../model';
 import { isImageNode } from '../utils/nodeType';
 
+/**
+ *
+ * @param img html的 img 标签
+ * @param format 图片格式
+ * @returns {string}
+ */
+export const getImageBase64 = (
+  img: HTMLImageElement,
+  format: string = 'png',
+) => {
+  // 1. 创建canvas DOM元素，并设置其宽高和图片一样
+  let canvas: HTMLCanvasElement | null = document.createElement('canvas');
+  canvas.width = img.width;
+  canvas.height = img.height;
+
+  // 2. 使用画布画图
+  const ctx = canvas.getContext('2d');
+  ctx?.drawImage(img, 0, 0, img.width, img.height);
+
+  // 3. 返回的是一串Base64编码的URL并指定格式
+  const dataURL = canvas.toDataURL(`image/${format}`);
+  canvas = null; // 释放
+  return dataURL;
+};
+
+/**
+ * 将图片 image 解析为图片
+ * @param node HTMLImageElement
+ */
 const parserToImage = (node: HTMLImageElement) => {
   if (!isImageNode(node)) {
     return;
   }
-  const url = node.src;
-  if (url.includes('svg')) {
-    // return new Svg({svgString})
-  }
-  const image = new Bitmap({ url });
+  const { width, height, y, x } = node.getBoundingClientRect();
+
+  const url = getImageBase64(node);
 
-  return image;
+  return new Bitmap({
+    url,
+    x,
+    y,
+    width,
+    height,
+  });
 };
 
 export default parserToImage;

src/utils/__tests__/url.spec.ts

@@ -0,0 +1,16 @@
+import { getBase64ImageString } from '../url';
+
+describe('getBase64ImageString', () => {
+  it('不符合 Base64 则返回空', () => {
+    const url = 'str';
+    expect(getBase64ImageString(url)).toBeUndefined();
+  });
+  it('符合 Base64 则返回可用的Base64 值', () => {
+    const url =
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8w8DwHwAEOQHNmnaaOAAAAABJRU5ErkJggg==';
+
+    expect(getBase64ImageString(url)).toBe(
+      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM8w8DwHwAEOQHNmnaaOAAAAABJRU5ErkJggg==',
+    );
+  });
+});

src/utils/nodeType.ts

@@ -1,3 +1,19 @@
+/**
+ * 判断是否是某种节点类型
+ * @param node
+ * @param type
+ */
+export const isNodeType = (node: Element, type: string | string[]): boolean => {
+  if (!node) return false;
+  const nodeName = node.nodeName.toLowerCase();
+
+  if (typeof type === 'string') {
+    return type === nodeName;
+  }
+
+  return type.includes(nodeName);
+};
+
 /**
  * 判断是否是 Text 节点
  */
@@ -12,15 +28,25 @@ export const isTextNode = (node: Element): boolean => {
  * 判断是否是 Group 节点
  */
 export const isGroupNode = (node: Element): boolean => {
-  const nodeName = node.nodeName.toLowerCase();
-  return nodeName === 'div' || nodeName === 'span' || nodeName === 'th';
+  return isNodeType(node, ['div', 'span', 'th']);
 };
 
 /**
  * 判断是否是图片节点
  */
 export const isImageNode = (node: Element): boolean => {
-  if (!node) return false;
-  const nodeName = node.nodeName.toLowerCase();
-  return nodeName === 'img';
+  return isNodeType(node, 'img');
 };
+
+/**
+ * 判断是否是图片节点
+ */
+export const isCanvasNode = (node: Element): boolean => {
+  return isNodeType(node, 'canvas');
+};
+
+/**
+ * 是否是 SVG 的子级
+ */
+export const isSVGDescendantNode = (node: Element) =>
+  node instanceof SVGElement && node.matches('svg *');

src/utils/url.ts

@@ -0,0 +1,17 @@
+/**
+ * 判断是否是 Base64Image 字符串
+ *
+ * 如果是 则返回可以用的字符串
+ *
+ * 否则返回空
+ * @param url 解析后的 base64 URL
+ */
+export const getBase64ImageString = (url: string): string | undefined => {
+  const reg = /data:image\/.*;base64,(.*==)/;
+  const group = reg.exec(url);
+
+  if (!group) {
+    return;
+  }
+  return group[1];
+};