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();

});