gitjinfeiyang/easy-canvas

使用render函数在canvas中创建文档流布局，小程序海报图、小程序朋友圈分享图。easy-canvas is a powerful tool helps us easy to layout with canvas.

easy-canvas's Issues

zIndex support !

能否支持英文断句？

类似 word-wrap:break-word

小程序canvas转换成图片失败？

我调用wx.canvasToTempFilePath失败，报canvasToTempFilePath: fail canvas is empty

Cannot read property 'getContext' of null

小程序this.createSelectorQuery()有时候会拿不到DOM

有人推荐写在nextTick里，但还是会存在拿不到，有更好的写法吗🐶

wx.nextTick(() => {
  ...
  this.createSelectorQuery()
     .exec(res => {
            const canvas = res[0].node;
      })
  ...
}

安卓和ios图片都没有渲染出来

downFile域名白名单已加，
没有勾选 不校验域名，我自己使用downFile也成功的，应该不是这个问题
但是真机上图片出不来，文字是显示了，排版也正常
模拟器上是可以的
还有什么问题导致？
有个lifecycle事件用处是什么？
可以看下下面的代码哪里有问题

drawPoster() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')

        const dpr = wx.getSystemInfoSync().pixelRatio
        console.log('dpr', dpr)
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        // ctx.scale(dpr, dpr)
        const containerWidth = canvas.width;
        const containerHeight = canvas.height;
        this.canvas = canvas;
        this.layer = ef.createLayer(ctx, {
          dpr,
          width: containerWidth,
          height: containerHeight,
          lifecycle: {
            onEffectSuccess: () => {
              console.log('onEffectSuccess')
            },
            onEffectFail() {
              // 网络请求失败
              showToast('部分图片下载失败')
            },
          }, canvas
        })
        this.createNode(containerWidth, containerHeight)
      })
  },
  createNode(containerWidth, containerHeight) {
    // 商品数据
    const detail = this.data.detail;
    // 小程序路径
    const params = { path: 'pages/index/index', appId: config.appId, scene: `0_${detail.spuId}_${detail.activityId}` };
    // 小程序二维码地址
    const qrurl = `${config.baseUrl2}/api/mp/create-unlimit-qrcode?${app.toQuery(params)}`
    console.log(`qrurl`, qrurl)
    this.setData({
      qrurl
    })
    // logo
    const logoUrl = `https://myunonline-qyyx-1304736005.cos.ap-shanghai.myqcloud.com/mp-customer-images/logo-share.png`;
    // Promise.all([
    //   downloadFile(logoUrl),
    //   downloadFile(detail.sharePicUrl),
    //   downloadFile(qrurl)
    // ]).then(tempFiles => {
    //   console.log('tempFils', tempFiles)
    // }).catch(err => {
    //   console.error('tempFils err', err)
    // })
    const node = ef.createElement(c => {
      return c(
        'view',
        {
          styles: {
            backgroundColor: '#fff',
            width: containerWidth,
            height: containerHeight
          }
        },
        [
          // logo
          c(
            'view',
            {
              styles: {
                backgroundColor: '#fff',
                textAlign: 'center',
                display: 'flex',
                justifyContent: 'center',
                marginTop: 20
              }
            },
            [
              c(
                'image',
                {
                  styles: {
                    width: 68
                  },
                  attrs: {
                    src: logoUrl,
                  },
                }
              )
            ]
          ),
          // 商品图片
          c(
            'view',
            {
              styles: {
                backgroundColor: '#fff',
                textAlign: 'center',
                display: 'flex',
                justifyContent: 'center',
                marginTop: 20
              }
            },
            [
              c(
                'image',
                {
                  styles: {
                    width: containerWidth - 120,
                    height: containerWidth - 120,
                    borderRadius: 25,
                  },
                  attrs: {
                    src: detail.sharePicUrl,
                  },
                }
              )
            ]
          ),
          // 商品标题
          c(
            'view',
            {
              styles: {
                backgroundColor: '#fff',
                marginTop: 20,
                marginLeft: 60,
                marginRight: 60
              }
            },
            [
              c(
                'text',
                {
                  styles: {
                    fontSize: 30,
                    color: '#000',
                    maxLine: 2
                  },
                },
                detail.shareTitle,
              )
            ]
          ),
          // 商品推荐语
          c(
            'view',
            {
              styles: {
                backgroundColor: '#fbfbfb',
                borderRadius: 15,
                borderColor: 'rgba(221, 221, 221, .6)',
                borderWidth: 1,
                marginTop: 20,
                marginLeft: 60,
                marginRight: 60,
                padding: [17, 26, 17, 26]
              }
            },
            [
              c(
                'text',
                {
                  styles: {
                    fontSize: 20,
                    color: '#000',
                    maxLine: 1
                  },
                },
                detail.shareDesc,
              )
            ]
          ),
          // 小程序码
          c(
            'view',
            {
              styles: {
                borderTopWidth: 1,
                display: 'flex',
                borderColor: '#eeeeee',
                marginTop: 20,
                alignItems: 'center',
                padding: [20, 60, 20, 60]
              },
            },
            [
              c('image', {
                styles: {
                  width: 140,
                  height: 140,
                  borderRadius: 140,
                },
                attrs: {
                  src: qrurl,
                },
              }),
              c('text', {
                styles: {
                  flex: 1,
                  paddingLeft: 30,
                  fontSize: 28,
                  color: '#000'
                }
              }, '长按识别查看商品详情')],
          ),
        ],
      );
    });
    node.mount(this.layer)
    console.log(node)
  }

考虑支持动画系统吗？

～高级UX

在Taro中使用时，click事件无效了

复现demo

请求大佬支持下react native

致敬

图片能渲染出来，但是调用 canvas.toDataUrl 报 “受污染的 canvas 无法执行“

图片能渲染出来，但是调用 canvas.toDataUrl 报 “受污染的 canvas 无法执行“

似乎inline标签没有解决方案？

比如类似这样一段html
link后面的文字
或者有什么代替方案么

小程序怎么保存图片？

如题所示，怎么保存图片，看了demo，不明白怎么保存

渲染多张图片时，部分图片可能渲染不出来

第一张是在模拟器上，第二张在实机上

在node环境支持图片加载

Image现在会报未定义，其实node-canvas包提供了Image类，如果可以做成可传入的配置就好了
本地改了下，使用Image类类似WX一样处理就能正常渲染

iOS设备上所有图片都生成不了

iOS设备上所有图片都生成不了

请问背景色linear-gradient要怎么写才生效

c( 'view', { styles: { backgroundColor: 'linear-gradient(180deg, #FF6A00 0%, #FF9C55 100%)' }, // 样式 attrs: {}, // 属性 比如src on: {}, // 事件 如click load }, [c('text', { color: '#fff' }, 'Hello World')] )
这样写是没有生效的

留言板

留言板

能否支持ts声明文件

添加 onload lifecycle

需要提供一个与 document.onload 语义相同的 lifecycle，不然 nodejs 中没有执行 canvas to image 的时机。

怎么在uniapp 中使用

如题
文档资料有点少

用这个是不是就可以进行小程序的热更了

如题

能否支持json数据格式的渲染

npm 包支持 nodejs 环境

问题

npm 包只有 esm 产物，但 nodejs 的生态主要还是 commonjs 规范，希望构建产物添加对应的支持。

场景

配合 https://github.com/Automattic/node-canvas 在 node 中动态生成图片。

能否支持一下letter-spacing?

字间距蛮常见场景，考虑支持一下么？