小程序使用 canvas 绘制图片

需求分析: 用户需要分享小程序卡片到朋友圈;

实现方式:小程序生成小程序码前后端都可以实现;

前端实现思路:从服务端拿回数据后利用 canvas 绘制成图片;

注意事项

1、小程序 canvas 绘制无法直接使用网络图片,需要使用 wx.downloadFile 方法,将返回的本地路径绘制到 canvas ,并且
图片路径需要转成服务端地址或者你的本地地址,通过 wx.downloadFile 方法得到一个微信的临时地址,这样做的目的是解决跨
域问题

2、拿到数据后 canvas 创建实例需要注意当前是否使用自定义 canvas 组件,如果是的话需要传入组件实例 this,绘制过程略,
完成后调用 wx.canvasToTempFilePath 方法得到绘制的图片

3、canvas 在小程序绘制文字截取无法准确计算文字宽度,h5 可以调用 CanvasRenderingContext2D.measureText(text) 这
个 API,可以返回一个TextMetrics对象,通过每个字符宽度的不断累加,精确计算哪个位置应该可以换行


4、该 canvas 无法复用 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,002评论 25 709
  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 28,852评论 9 295
  • 1、钱是什么? 钱是靠人挣的, 也是给人花的。 小财是财富, 大财是包袱。 2、房是什么? 房是给人住的,不是让人...
    大道有行阅读 7,213评论 0 0
  • 6月27日。今天你40天了,越来越大了、也会的越来越多了,知道用哭来表达自己情绪,甚至哭的凶的时候,还有眼泪。希望...
    pinkgirl_阅读 119评论 0 0
  • 实施本过程域要达到以下目标:为控制项目进度、质量、成本、风险进行的决策,提供数据支持。所以,测量与分析活动遍布软件...
    王小双阅读 730评论 0 1