zoukankan      html  css  js  c++  java
  • 前端手势控制图片插件书写五(添加贴纸功能)

    一、贴纸函数需求

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

      

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

    二、添加贴纸原理

      本质上就是将两张变换后的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()
        }

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

  • 相关阅读:
    K近邻法
    感知机
    统计学习方法概论
    神经网络的学习 Neural Networks learing
    对线性回归、逻辑回归、各种回归的概念学习
    从零开始创建VUE项目
    Java中Log4j.properties配置文件详解
    Java中Log4j的入门实例
    Java中Log4j的基本使用方法说明
    C#与Java的RSA中的X509EncodedKeySpec、PKCS8EncodedKeySpec
  • 原文地址:https://www.cnblogs.com/qdcnbj/p/11235608.html
Copyright © 2011-2022 走看看