Front-end gesture control plug-picture writing five (add stickers feature)

First, the function needs stickers

　　Encountered in development need to add a variety of other needs of small stickers final composite picture in the picture.

　　

　　So add a similar feature in the plugin.

Second, add stickers principle

　　In essence, it is the canvas after the two were converted to export a picture, and then these two pictures in order to draw on the new canvas canvas, eventually export the picture after synthesis.

　　Example code:

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 * = the this .imageQuality; 
        console.warn (addPicObj) 

        // ios phone safari does not support async, so the situation is still covered by a layer appears. 
        the async function orderDraw () {
             for (the let I = 0; I <keyArr.length; I ++ ) { 
                the let pure_imgSrc = addPicObj [keyArr [I]] pure_img;. 
                the 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()
    }

 To be continued, then add details later ~