评论

通过canvas2d,100行代码实现压缩图片、添加水印、另存图片并上传

通过canvas2d实现压缩图片、添加水印、另存图片并上传。坑多,社区没有找到合适的方案,遂总结。 参考了多人的回答及文章,详情见文末。

🍙代码片段: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中的纸玫瑰

最后一次编辑于  2020-11-26  
点赞 3
收藏
评论

4 个评论

  • 罗非鱼🐠
    罗非鱼🐠
    2023-09-01

    感谢!问题已解决!

    2023-09-01
    赞同
    回复
  • 大尾巴狼
    大尾巴狼
    2021-05-30

    留印回看

    2021-05-30
    赞同
    回复
  • ~ จุ๊บ🌻🌾
    ~ จุ๊บ🌻🌾
    2021-05-08

    如何修改照片的分辨率呢,类似最美证件照的 一寸,两寸大小

    2021-05-08
    赞同
    回复
  • 雨后彩虹
    雨后彩虹
    2020-12-13

    添加图片水印咋弄啊

    2020-12-13
    赞同
    回复 1
    • 哇哦
      哇哦
      2020-12-17
      再往canvas内画张图片。
      2020-12-17
      回复
登录 后发表内容