通过canvas2d,100行代码实现压缩图片、添加水印、另存图片并上传
发布于 3 年前 作者 oyan 4995 次浏览 来自 分享

🍙代码片段:https://developers.weixin.qq.com/s/Xache9mO7MmE

🧂写在前面:由于在编辑器插入代码撤销后导致的bug太过于诡异, 我放弃在文本内插入代码,遂在语雀上写了文章,需要代码分析的可去语雀查看。文章地址:https://www.yuque.com/docs/share/ee2856e2-93f3-4cc2-92b8-81fcb051074a?# 《微信小程序 《canvas2d实践》》

🍪业务需要拍摄照片后,添加坐标、时间水印,压缩图片后上传。

微信小程序官方文档里:

CanvasContext wx.createCanvasContext(string canvasId, Object this)

本接口从基础库版本 1.9.6 起支持在小程序插件中使用
从基础库 2.9.0 开始,本接口停止维护,请使用 Canvas 代替
创建 canvas 的绘图上下文 CanvasContext 对象

那肯定得用Canvas 2d来实现啊!

实现:

  1. 选择图片,需通过wx.getImageInfo()拿到图片的宽高;
  2. 压缩图片,需注意分辨率;
  3. 绘制图片,需通过canvas.createImage()创建图片,在onload中绘制图片到canvas;
  4. 添加水印,设置字体时需注意书写语法规范;
  5. canvas转为图片并上传,需在onload图片加载完后再转,destWidth和destHeight是实际转出的宽高,canvas2d中需配置canvas而非canvasId

参考链接:

圣殿骑士https://developers.weixin.qq.com/community/develop/article/doc/000242073903a04e082ab595b52013

https://developers.weixin.qq.com/community/develop/doc/000c4c00f703a84043ba6bf0058c00?highLine=canvas%25202d中的纸玫瑰

1 回复

添加图片水印咋弄啊

回到顶部