收藏
回答

wxml-to-canvas,模拟器环境下,创建 image 画布报错。

使用官方提供的 demo,wxml-to-canvas 包的引用路径做了私有化处理。

// 引用 wxml-to-canvas
"usingComponents": {
  "wxml-to-canvas": "../../wxcomponents/wxml-to-canvas/src/index"
}

私有化包 wxml-to-canvas 和 widget-ui

修改 wxml-to-canvas 中对 widget-ui 的引用路径

//widget.js 中
const Block = require('../../widget-ui/dist/index.js')


使用官方提供的 demo

export const wxmlTempl = ()=>{
 return `
   <view class="container" >
     <view class="item-box red">
     </view>
     <view class="item-box green" >
       <text class="text">yeah!</text>
     </view>
     <view class="item-box blue">
         <image class="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3582589792,4046843010&fm=26&gp=0.jpg"></image>
     </view>
   </view>
 `
}
export const styleTempl = {
  container: {
    width: 300,
    height: 200,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ccc',
    alignItems: 'center',
  },
  itemBox: {
    width: 80,
    height: 60,
  },
  red: {
    backgroundColor: '#ff0000'
  },
  green: {
    backgroundColor: '#00ff00'
  },
  blue: {
    backgroundColor: '#0000ff'
  },
  text: {
    width: 80,
    height: 60,
    textAlign: 'center',
    verticalAlign: 'middle',
  }
}


<wxml-to-canvas ref="drawImageRef" width="375" height="550" class="widget" ></wxml-to-canvas>


const toShareWx = async () => {
	const imgContainer = await drawImageRef.value.renderToCanvas({wxml: wxmlTempl(), style: styleTempl});
	const imgRes = await drawImageRef.value.canvasToTempFilePath();
}


报错:draw.js

const _drawImage = (img) => {
        if (this.use2dCanvas) {
		  console.log('canvas:', canvas);
          const Image = canvas.createImage() // 这行报错
          Image.onload = () => {
            ctx.drawImage(Image, x, y, w, h)
            ctx.restore()
            resolve()
          }
          Image.onerror = () => { reject(new Error(`createImage fail: ${img}`)) }
          Image.src = img
        } else {
          ctx.drawImage(img, x, y, w, h)
          ctx.restore()
          resolve()
        }


回答关注问题邀请回答
收藏

1 个回答

  • Demons
    Demons
    2023-06-10

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2023-06-10
    有用
    回复
登录 后发表内容