前端手势控制图片插件书写五（添加贴纸功能）

Posted 2022-05-08 qdcnbj

一、贴纸函数需求

　　在开发中遇到需要在图片上加上其他各种小贴纸最终合成一张图片的需求。

　　

　　所以在插件中添加了类似的功能。

二、添加贴纸原理

　　本质上就是将两张变换后的canvas分别导出一张图片，然后将这两张图片按顺序绘制在新的canvas画布上，最终导出合成后的图片。

　　实例代码：

drawSyntheticImg()
        let keyArr = Object.keys(addPicObj)
        var bgcanvas = document.getElementById(‘canvas1‘);
        var ctx = bgcanvas.getContext(‘2d‘);
        let canvas_outer = document.getElementById(‘canvas_outer1‘);
        let canvasOuter = canvas_outer.getBoundingClientRect();
        ctx.clearRect(0, 0, canvasOuter.width * this.imageQuality, canvasOuter.height * this.imageQuality);
        bgcanvas.height = canvasOuter.height * this.imageQuality;
        bgcanvas.width = canvasOuter.width * this.imageQuality;
        console.warn(addPicObj)

        //ios手机safari不支持async，所以仍然会出现图层被覆盖的情况。
        async function orderDraw()
            for (let i = 0; i < keyArr.length; i++) 
                let pure_imgSrc = addPicObj[keyArr[i]].pure_img;
                let pure_img = document.createElement(‘img‘);
                pure_img.src = pure_imgSrc;
                function imgLoad()
                    pure_img.onload = () => 
                        ctx.drawImage(pure_img, 0, 0, bgcanvas.width, bgcanvas.height);
                    
                
                await imgLoad()
            
        
        orderDraw()
    

 未完待续，详细介绍以后再添加~