云开发Painter插件使用分享过程
发布于 4 年前 作者 qianglei 634 次浏览 来自 分享

为什么选择Painter?

也尝试过微信的扩展组件wxml-to-canvas ,没有painter布局灵活,关键是wxml-to-canvas绘制的图片与编辑器的里位置不一样,什么原因我也不清楚就果断的选择了

Painter。

Painter插件绘制的图片是矩形?

参考的代码是@ 喵的房东大人 , 原因我总结了下,要给展示图片的组件固定样式,估计是这样加了样式就正常了。

 
 .share-image {
  width560rpx;
  display: block;
  border-radius16rpx;
  box-shadow0px 4rpx 8px 0px rgba(0000.1);
}

Painter绘制图片文字模糊有锯齿?

解决方法: 画布大小= 设计的宽高px*2*像素比

导出图片=画布大小*2

//画布大小

          let pro=res.pixelRatio>2?2:res.pixelRatio
       
            that.setData({ 
              canvasDisplayW:280*2*pro,    
              canvasDisplayH:435*2*pro,
            });
          }
        }); 

//需修改Painter源码
   saveImgToLocal() {
      const that = this;
      setTimeout(() => {
        wx.canvasToTempFilePath({
          canvasId'photo',
          canvas: that.properties.use2D ? that.canvasNode : null,
          destWidth: that.canvasWidthInPx*2,  //*2
          destHeight: that.canvasHeightInPx*2,//*2
          successfunction (res{
            that.getImageInfo(res.tempFilePath);
          },
          failfunction (error{
            console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`);
            that.triggerEvent('imgErr', {
              error: error
            });
          },
        }, this);
      }, 300);
    },

云开发图片地址如何在Painte使用?

方法:替换,将微信云图片 文件ID 替换成https.不用开启 校验合法域名,真机也可以用

/**@图片处理路径 */
imgPathDs(regsrc){
  
  let       imgReg  = new RegExp('cloud://你的File ID 格式');           
  return    regsrc.replace(imgReg, 'https://下载格式.tcb.qcloud.la');
},

如何生成菊花码?

方法:通过云函数方法拿到buffer,转成base64,再将base64转为图片,再传给painte.

结语:我是老师口子说的面向百度开发,以上是个人搜索尝试的结果,以上内容不是唯一最佳的方法,不对的地方望指正。

1 回复

感谢分享。如果能有一个最小化的代码片段就完美了。

回到顶部