wechat-miniprogram / wxml-to-canvas Goto Github PK

你好，最近频繁出现问题，请问是否改动了什么呢？

我想绘制一个宣传海报，上面有用户的头像和昵称，因为每个用户的信息都不同，请问应该如何动态传值满足需求？

源码中，图片下载失败时应该重置canvas的状态，不然重新成的图片可能会有问题

考虑类似这样解决：

操作过程：
1、在页面中点击“运行片段”：https://developers.weixin.qq.com/s/r6UBlEm17pc6
2、在小程序开发工具IDE中打开代码片段
3、在小程序开发IDE中，直接点击“导出图片”按钮就出现提下错误：

错误信息：
Unhandled promise rejection TypeError: Cannot read property 'top' of undefined
at index.js? [sm]:165
at new W (WASubContext.js?t=wechat&s=1648970985557&v=2.23.2:2)
at Mi.canvasToTempFilePath (index.js? [sm]:163)
at Mi.extraImage (index.js? [sm]:18)
at Object.i.safeCallback (WASubContext.js?t=wechat&s=1648970985557&v=2.23.2:2)
at WASubContext.js?t=wechat&s=1648970985557&v=2.23.2:2
at wr (WASubContext.js?t=wechat&s=1648970985557&v=2.23.2:2)
at WASubContext.js?t=wechat&s=1648970985557&v=2.23.2:2
at h (WASubContext.js?t=wechat&s=1648970985557&v=2.23.2:2)
at WASubContext.js?t=wechat&s=1648970985557&v=2.23.2:2(env: Windows,mp,1.05.2203070; lib: 2.23.2)

在库文件index.js代码中，出错的位置：
canvasToTempFilePath(args = {}) {
return new Promise((resolve, reject) => {
const {
top, left, width, height
} = this.boundary
wx.canvasToTempFilePath({
x: left,
y: top,
width,

小程序开发工具版本：1.05.22
调试基础库：2.23.2

在uni-app中使用自定义微信组件，引入该插件，引入后执行函数
后报错

文档中说 position 布局的 relative, absolute 两个值，实际使用时会报错，提示 relative 或 absolute 未定义。
使用的是wxml-to-canvas最新版，在官方demo基础上随意添加position属性可以重现。

MiniProgramError Cannot read property 'nodeId' of undefined TypeError: Cannot read property 'nodeId' of undefined at Image.set [as src]

打开代码片段，预览PC端小程序会报错，canvas 渲染失败：

MiniProgramError
null is not an object (evaluating 'n.getContext')
at canvas (miniprogram_npm/wxml-to-canvas/index.js:126:23)
at (WAService.js:2:2241907)
at
at (WAService.js:2:122361)
at (WAService.js:2:2242060)
forEach@[native code]
at n (WAService.js:2:2242039)
at (WAService.js:2:2242187)
at (WAService.js:2:3165496)
at n (WAService.js:2:3072125)
at (WAService.js:2:3072313)
at (WAService.js:2:1909240)
at Q (WAService.js:2:78233)
global code@

操作系统：macOS Monterey 12.0.1
微信开发者工具版本：1.05.2110290

tmp/YEBHErVHQ86De13348d5ef2982c193d1becaefde55e5.jpg#devtools_no_referrer:1 GET http://tmp/YEBHErVHQ86De13348d5ef2982c193d1becaefde55e5.jpg net::ERR_PROXY_CONNECTION_FAILED(env: macOS,mp,1.05.2105170; lib: 2.16.1)
Image (async)
set src @ VM380:1
_drawImage @ index.js? [sm]:623
success @ index.js? [sm]:641
forEach.u. @ VM389 WAService.js:2
d @ VM389 WAService.js:2
(anonymous) @ VM389 WAService.js:2
p @ VM389 WAService.js:2
(anonymous) @ VM389 WAService.js:2
d @ VM389 WAService.js:2
(anonymous) @ VM389 WAService.js:2
(anonymous) @ VM389 WAService.js:2
value @ VM389 WAService.js:2
B @ VM389 WAService.js:2
(anonymous) @ VM389 WAService.js:2
(anonymous) @ VM389 WAService.js:2
c @ VM8 asdebug.js:1
u @ 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
share.js? [sm]:144 ****error: Error: createImage fail: http://tmp/YEBHErVHQ86De13348d5ef2982c193d1becaefde55e5.jpg
at HTMLImageElement.Image.onerror (index.js? [sm]:622)

<image class="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3582589792,4046843010&fm=26&gp=0.jpg"></image>

在taro中没法按照文档一样使用啊

连续生成几次海报图后会报内存不足

如果给一个DOM元素设置边框: borderWidth: 2 , borderColor: #000,
生成的效果不是2宽度的边框，而是整个元素被填充了#000颜色，我翻了源码，定位问题如下

这里采用fillStyle是不正确的，还有this.roundRect方法的参数也传少了，我的修复方案如下

aspectFill, aspectFit 等之类的。
和微信小程序一样。

renderToCanvas()执行后，canvas属性没有宽高值，导致canvas渲染不出来，求解

查看dom结构发现wxml-to-canvas组件内置的canvas画布尺寸是写死的400*300，那么如果要绘制长图或者其他尺寸的图，则需要等比缩小，太复杂，建议优化

支持 setShadow 属性吗？

需求：
下载海报，每张海报都是wxml和wxss写的，所以想转成canvas，在下载。
问题：
在用的过程中发现，如果想下载，必须先画在页面上，但是画在页面上的wxml-to-canvas宽高不能动态设置，设置之后canvas的宽高都变成了0px，无法达到自适应。
尝试过画到页面中，但是将其隐藏：

<view style="display:none">
  <wxml-to-canvas/>
</view>

但是执行到canvasToTempFilePath()卡住了，没有任何报错信息，这是为什么呢？

VM290:48 页面【miniprogram_npm/wxml-to-canvas/index]错误:
 TypeError: Cannot read property 'mark' of undefined
    at VM282 index.js:734
    at VM282 index.js:813
    at Object.<anonymous> (VM282 index.js:1060)
    at __webpack_require__ (VM282 index.js:45)
    at Object.<anonymous> (VM282 index.js:202)
    at __webpack_require__ (VM282 index.js:45)
    at VM282 index.js:125
    at VM282 index.js:127
    at webpackUniversalModuleDefinition (VM282 index.js:17)
    at VM282 index.js:23

构建npm编译报错如上

• < wxml-to-canvas class="widget" width="500" height="{{height}}" >

this.setData({height:500});
高度发生改变后canvas生成的图片都变形

小程序云开发上传的图片默认的地址为cloud://开头的
希望能尽快支持