最近心血来潮做了一个微信朋友圈比较火的戴口罩的功能,戴圣诞帽的功能,也可以手拿国旗哦。预览图如下
图一:
图二:
预览链接如下:
https://www.w2le.com/demo/head/
大体思路:
主要就是上传底图之后,对下面的装饰图的一个操作,底图暂时没有做成可操作的,这里实现了点击小图,将小图定位底图之上,可以选择多张小图,然后点击定位小图,切换被点击的定位销图成为操作对象,对它进行缩放,移动和旋转。
我会设置一个类,专门存放小图的各种信息,包含大小,位置,偏移量,是否当前操作对象等等,然后每添加一个小图就生成一个这样的对象,把这些对象存储在一个数组中。
操作完之后,就将底图和操作小图,按照顺序绘制在canvas上,然后生成base64的图片append一个img对象作为预览图。
具体实现之后接着聊