vue 封装原型方法 加 promist .then

 

核心代码如下

/**
 * 2019年5月11日 10:54:32 
 * @xieyishang
 * 封装生成海报js
 */

/**
 * A 海报地址
 * B 是头像二维码地址
 * 第三个参 插入的id节点
 * 
 * 用了pormist 还可以用 .then
 */
const drawAndShareImage =  (imgA,imgB,dom)=>{//封装生成海报方法~

    return new Promise((resolve,reject)=>{

            var canvas = document.createElement("canvas");
            canvas.width = 1304;
            canvas.height = 2316;
            var context = canvas.getContext("2d");
            context.rect(0 , 0 , canvas.width , canvas.height);
            context.fillStyle = "#fff";
            context.fill();
            var imageA = new Image();
            imageA.crossOrigin = 'Anonymous';
            imageA.src = imgA;
            imageA.onload = function(){
                context.drawImage(imageA , 0 , 0 , 1306 , 2316);
                var imageB = new Image();
                imageB.crossOrigin = 'Anonymous';
                imageB.src = imgB;
                imageB.onload = function(){
                    context.drawImage(imageB , 10 , 2060 , 240 , 240);
                    //var base64 = canvas.toDataURL("image/png");
                    var base64 = canvas.toDataURL("image/jpeg");
                    var img = document.getElementById(dom);
                    // console.log('Hello');
                    img.setAttribute('src' , base64);
        
                    console.log("加载完了~");

                    if (dom!=null) {
                        resolve(true);
                    }else {
                        reject(false);
                    }
                
        
                }
            }

    });

}
 
export { drawAndShareImage }

 

 

main.js引入

 

import {drawAndShareImage } from '@/utils/canvascode';//生成海报方法 Vue.prototype.$Canvas = drawAndShareImage;//放在原型里面~

 

 

调用

 

this.$Canvas(this.shareBannerSRC,this.codeSRC,"shareBoximg").then(val=>{ console.log("val",val); this.shareBox = true; this.shareWait = false; Toast.clear(); });

标签：canvas,vue,封装,promist,imageB,imageA,context,var,drawAndShareImage
来源： https://www.cnblogs.com/shaozhu520/p/10848627.html