微信小程序实现表情包编辑

最新推荐文章于 2025-10-19 21:31:50 发布

原创

最新推荐文章于 2025-10-19 21:31:50 发布 · 1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #表情包在线编辑 #斗图小程序

本文介绍如何在微信小程序中实现表情包编辑。通过Canvas绘制图片和文字，然后利用wx.canvasToTempFilePath将编辑后的图片保存或预览。文中提到了三种实现方式，最终选择了通过预览图片来分享，因为直接分享和保存到手机的方法存在一些问题。

主要思路是用Canvas来实现表情图片的编辑Canvas，本文中代码上注释部分请注意，有几个关于小程序api的坑

首先在页面加载的时候从后端获取到图片url，并在Canvas上讲该图片绘制上去

当用户在input中输入文字后点击发送按钮，先在Canvas上重新绘制图片和文字，再通过某种方式发送给好友

wxml文件中代码如下（首页跳转过来的的时候会带上图片id，然后在本页面去后端拿图片信息（包括图片url和默认的文字））：

 
  
   
   < 
   navigator 
   url= 
   "../index/index" 
   hover-class= 
   "navigator-hover"></ 
   navigator 
   > 
   
   
   < 
   view 
   class= 
   "container"> 
   
   
   < 
   view 
   class= 
   'imgDiv'> 
   
   
   < 
   canvas 
   class= 
   "firstCanvas" 
   canvas-id= 
   "firstCanvas"></ 
   canvas 
   > 
   
   
   <