当前位置:首页 > 微信朋友圈给头像戴口罩,戴圣诞帽的功能(一)

微信朋友圈给头像戴口罩,戴圣诞帽的功能(一)

发布于 2020-03-22 阅读 229 次 Canvas Javascript

最近心血来潮做了一个微信朋友圈比较火的戴口罩的功能,戴圣诞帽的功能,也可以手拿国旗哦。预览图如下

图一:

图二:

预览链接如下:

https://www.w2le.com/demo/head/

大体思路:

主要就是上传底图之后,对下面的装饰图的一个操作,底图暂时没有做成可操作的,这里实现了点击小图,将小图定位底图之上,可以选择多张小图,然后点击定位小图,切换被点击的定位销图成为操作对象,对它进行缩放,移动和旋转。

我会设置一个类,专门存放小图的各种信息,包含大小,位置,偏移量,是否当前操作对象等等,然后每添加一个小图就生成一个这样的对象,把这些对象存储在一个数组中。

操作完之后,就将底图和操作小图,按照顺序绘制在canvas上,然后生成base64的图片append一个img对象作为预览图。

具体实现之后接着聊