gitjinfeiyang / easy-canvas Goto Github PK

View Code? Open in Web Editor NEW

654.0 654.0 73.0 1.4 MB

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

Home Page: https://gitjinfeiyang.github.io/easy-canvas/example

License: MIT License

JavaScript 69.62% HTML 30.38%

canvas css html javascript vue

easy-canvas's People

Contributors

Stargazers

Watchers

Forkers

danny1879 suppermoment sevtins whyisma liulinboyi fondadam keyzf linecode htoooth suntyu eshwaranad atzcl gjcfer renyuanz tibo-vip wangscript007 824420263 react-sextant fork-archive-hub hfimy moming17 gyouny liuzhijun meetsongta townechow kanbujianwojpg cliffordfajardo zian502 jinjianfeng pccbo-fe ihhu 027kaka hhy5277 flybbjcs70 liuqingyou123 xuejianbin shihaidong sven-ybj 54runoob zhangzhuang15 brianwalkertoretto maxyangyu hondrytravis cgwxyz chenymin wodemax changan712 yaoduren123 winfrise bilipan myfirstway jrt324 loycoder sangtian152 hailon minqun yangjingyu haizlin-idea intelligent-entertainment icarrear yangjy liejiayong reveur000 guaqiu5 gg-big-org silkjs codelistener 65min akaedu2012 roc-hu zhang-yun-jie aquarius200 willbean

easy-canvas's Issues

Cannot read property 'getContext' of null

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

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

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

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

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

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

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

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

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

复现demo

能否支持一下letter-spacing?

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

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

如题

安卓和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)
  }

问题

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

场景

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

考虑支持动画系统吗？

～高级UX

小程序怎么保存图片？

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