taro3项目中引用omi/packages/cax/失败

[tang3]

在taro3项目中将omi中的cax库引用，报render组件错误，引用代码为：import cax from '../../cax/cax'，src目录层级如下： ├── app.config.js ├── app.css ├── app.js ├── board.png ├── cax │   ├── cax.js │   ├── common │   ├── index.js │   ├── index.json │   ├── index.wxml │   ├── index.wxss │   ├── pasition │   ├── render │   └── svg ├── goban.css ├── help.js ├── index.html ├── lib │   └── cax ├── pages │   ├── cax │   └── index

报错信息如下： TypeError: document.createElement(...).getContext is not a function at Object. (create-image-data.js:4) at Object../src/cax/render/filter/create-image-data.js (create-image-data.js:11) at webpack_require (bootstrap:79) at Object../src/cax/render/filter/blur.js (blur.js:1) at webpack_require (bootstrap:79) at Object../src/cax/render/filter/index.js (index.js? [sm]:1) at webpack_require (bootstrap:79) at Object../src/cax/render/render/canvas-render.js (threshold.js:12) at webpack_require (bootstrap:79) at Object../src/cax/render/render/renderer.js (render.js:9) (anonymous) @ VM527:48 doWhenAllScriptLoaded @ VM526:80 scriptLoaded @ VM526:100 (anonymous) @ VM526:125 (anonymous) @ VM510 WAService.js:2 r @ VM510 WAService.js:2 Promise.then (async) a @ VM510 WAService.js:2 e.exports @ VM510 WAService.js:2 Z @ VM510 WAService.js:2 ie @ VM510 WAService.js:2 (anonymous) @ VM510 WAService.js:2 Promise.then (async) (anonymous) @ VM510 WAService.js:2 F @ VM510 WAService.js:2 (anonymous) @ VM510 WAService.js:2 (anonymous) @ VM526:151 (anonymous) @ VM526:155 loadScripts @ assubloader.js:1 async function (async) loadScripts @ assubloader.js:1 loadAppResourceScripts @ assubloader.js:1 (anonymous) @ VM522:1 t.loadScripts @ VM8 asdebug.js:1 loadAppService @ VM8 asdebug.js:1 messagerCallback @ VM8 asdebug.js:1 (anonymous) @ VM8 asdebug.js:1 f @ VM8 asdebug.js:1 g @ VM8 asdebug.js:1 (anonymous) @ VM8 asdebug.js:1 _ws.onmessage @ VM8 asdebug.js:1 VM510 WAService.js:2 TypeError: document.createElement(...).getContext is not a function at Object. (create-image-data.js:4) at Object../src/cax/render/filter/create-image-data.js (create-image-data.js:11) at webpack_require (bootstrap:79) at Object../src/cax/render/filter/blur.js (blur.js:1) at webpack_require (bootstrap:79) at Object../src/cax/render/filter/index.js (index.js? [sm]:1) at webpack_require (bootstrap:79) at Object../src/cax/render/render/canvas-render.js (threshold.js:12) at webpack_require (bootstrap:79) at Object../src/cax/render/render/renderer.js (render.js:9)

[Miogaror]

研究了一下源码，不是很透彻，但是解决了现在的问题

@dntzhang 不晓得create-image-data.js具体作用；

里面使用了 H5 的 Canvas API，微信小程序是另一套Canvas API，并不能兼容；

然后我就注释了create-image-data.js；

let tmpCtx = null
// if (typeof document !== 'undefined') {
//   tmpCtx = document.createElement('canvas').getContext('2d')
// } else if (typeof wx !== 'undefined' && wx.createCanvas) {
//   tmpCtx = wx.createCanvas().getContext('2d')
// }

export function createImageData(w, h) {
  return tmpCtx
}

就可以使用了, 具体后面再慢慢研究

实现效果

代码

引入cax组件 pages/xxx.config.js

export default {
  usingComponents: {
    'cax-element': '../../lib/cax/index'
  }
}

具体代码 pages/xxx.js

js部分

import cax from "@/lib/cax/cax"
useReady(() => {
    const svg = cax.renderSVG(cax.html`
      <svg width="232" height="316" >
          <g id="grapes">
                <g id="leaf" transform="translate(79.000000, 0.000000)" fill-rule="nonzero">
                    <g id="center" transform="translate(33.000000, 0.000000)">
                        <path d="M4.39985997,49.4902555 C4.39985997,49.4902555 -3.24982496,30.6310009 4.39985997,3 L14,8.57613962 C14,8.57613962 6.6675891,38.8270205 10.5776014,50 L4.39985997,49.4902555 Z" id="路径" fill="#A54D00"></path>
                        <path d="M14.203542,52 L3.96570532,51.1469274 L3.52125218,50.0409014 C3.20140007,49.2484861 -4.19245035,30.3014991 3.44931757,2.4262881 L4.11471273,0 L17,7.55633873 L16.6634488,8.9566167 C16.5927987,9.25344982 9.59715776,38.7070386 13.2285711,49.1878288 L14.203542,52 Z M6.71463511,47.4907178 L8.88551892,47.6713988 C6.85336615,36.3026904 11.3056048,15.153976 12.5927205,9.45478011 L6.5296604,5.89923558 C1.21549098,27.5009431 5.36971479,43.2976273 6.71463511,47.4907178 Z" id="形状" fill="#000000"></path>
                    </g>
                    <g id="right" transform="translate(40.000000, 20.000000)">
                        <path d="M2.17741452,28.6528424 C2.17741452,28.6528424 5.94926258,-0.390334109 36.7797383,2.08049368 C36.7797383,2.08049368 32.3470054,32.9787234 2.17741452,28.6528424 Z" id="路径" fill="#A8D626"></path>
                        <path d="M7.77351267,31 C5.88823784,31 3.91207511,30.8531416 1.89825881,30.5645778 L0,30.292761 L0.245397343,28.405502 C0.281752505,28.1220911 4.27043313,0 33.1390285,0 C34.3712088,0 35.6501315,0.0515292553 36.9368446,0.155875997 L39,0.320769614 L38.7078603,2.35359874 C38.6676099,2.6395861 34.2907081,31 7.77351267,31 Z M4.46908812,26.9781416 C15.7846323,28.0241855 24.3306921,23.8606217 29.9722342,14.6793966 C32.5235876,10.5248504 33.8232846,6.31104555 34.4192496,3.88530585 C33.9868828,3.87113531 33.5610081,3.86469415 33.1403269,3.86469415 C11.5622399,3.86469415 5.80643873,21.0793301 4.46908812,26.9781416 Z" id="形状" fill="#000000"></path>
                    </g>
                    <g id="left" transform="translate(0.000000, 20.000000)">
                        <path d="M36.8239563,28.6528424 C36.8239563,28.6528424 33.0496371,-0.390334109 2.22018776,2.08049368 C2.22018776,2.08049368 6.65536986,32.9787234 36.8239563,28.6528424 Z" id="路径" fill="#A8D626"></path>
                        <path d="M31.2280445,31 L31.2280445,31 C4.71173181,31 0.333677342,2.6395861 0.292129969,2.35359874 L0,0.320769614 L2.06308676,0.155875997 C3.34975697,0.0528174867 4.6273387,0 5.86077635,0 C34.7271123,0 38.7182569,28.1220911 38.7546108,28.405502 L39,30.292761 L37.1018044,30.5645778 C35.0893535,30.8544299 33.1119582,31 31.2280445,31 Z M4.58189626,3.88401762 C5.17654305,6.31104555 6.47619682,10.5235622 9.02876357,14.6781084 C14.1066316,22.9434009 21.574772,27.1353059 31.2267461,27.1353059 L31.2280445,27.1353059 C32.2952926,27.1353059 33.3988947,27.0824884 34.5258672,26.9781416 C33.1457154,20.9659658 27.083694,3.17033743 4.58189626,3.88401762 Z" id="形状" fill="#000000"></path>
                    </g>
                </g>
            </g>
      </svg>
      `, 'grape', Taro.getCurrentInstance().page)

    const { children } = svg.children[0]
    console.log(children)
  })

jsx部分

<cax-element id='grape'></cax-element>