vue 封装原型方法加 promist .then

佚名 6年前 (2019-05-11) 随笔 1898人围观抢沙发百度已收录

核心代码如下

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

/**
 * 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(); });