zoukankan      html  css  js  c++  java
  • wx小程序用canvas生成图片流程与注意事项

    1、需要画入canvas的 图片都需要先缓存到本地 

      

    let ps = []
        ps.push(that.loadImageFun(this.statusInfo.avatar_url, "headImg"))
        Promise.all(ps).then(res => {
        // 画图
    })
    
    
    loadImageFun(url, index) {
        let _this = this
        return new Promise((resolve, reject) => {
          wx.downloadFile({
            url,
            success(res) {
              if (res.statusCode === 200) {
                _this.loadedImgs[index] = res.tempFilePath
                resolve()
              }
              else
                reject()
            },
            fail() {
              reject()
            }
          })
        })
      },

    2、从canvas中导出图片时,android手机生成不了图片。(原因是,draw的回调函数在android上是假回调,ios上貌似是真的555,因为canvas还没准备好,所以得手动加延时了...)

    //绘制图片
          ctx.draw(false, () => {
            setTimeout(()=>{
              wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                 size,
                height: imgHeight,
                destWidth: size,
                destHeight: imgHeight,
                canvasId: 'shcanvas',
                success: function (res) {
                  var tempFilePath = res.tempFilePath;
                  that.share_img = tempFilePath;
                  // wx.previewImage({
                  //   urls: [that.share_img],
                  // })
                }
              })
            },1000)
          })
  • 相关阅读:
    AS3.0纯代码编写的两款loading效果
    AS3.0 Vector的运用
    java 垃圾回收总结(1)
    as3垃圾回收机制
    AS3.0 效率优化
    数组去重的方法
    javascript 的垃圾回收机制讲一下
    浅拷贝和深拷贝
    判断 js 类型的方式
    前端安全问题?
  • 原文地址:https://www.cnblogs.com/Mvloveyouforever/p/9606616.html
Copyright © 2011-2022 走看看