xiaoe_mp_npm 0.1.13 → 0.1.14

package/miniprogram_dist/SharePoster/createPoster/index.js

@@ -1,201 +1,201 @@
-// obj img font shape
-import { drawImage, drawText, drawBase64Img, roundRect,initTextStyle } from './utils/drawImage.js';
-import { verfiyObjEmpty,PromiseAllSettled } from './utils/util';
-import { TYPES } from '../libs/constant';
-
-class objToPoster {
-    // posterObj-元素对象 imgWidth-图片宽（单位默认px） imgHeight-图片长（单位默认px） proportion（图片精度-越大精度越高）
-    constructor( imgWidth = 300, imgHeight = 700, proportion = 1,that) {
-        this.ctx = null;
-        this.canvas = null;
-        // 生成的海报
-        this.img = null;
-        this.proportion = proportion;
-        // 绘制的所有图片 文字默认再图片上面 == 所以先画图片再画文字的
-        this.posterImages = [];
-        // base64图片
-        this.posterBase64images = [];
-        // 绘制所有的文字
-        this.posterFonts = [];
-        //绘制所有的不同的形状
-        this.posterDifferentShapes = [];
-        // 初始化canvas元素
-        // this.initCanvas(that);
-    }
-    initCanvas(that,dpr = wx.getSystemInfoSync().pixelRatio) {
-        return new Promise((resolve,reject)=>{
-            wx.createSelectorQuery().in(that)
-                .select('#customCanvas')
-                .fields({
-                    node:true,size:true
-                })
-                .exec(res=>{
-                    const canvas = res[0].node
-                    const ctx = canvas.getContext('2d')
-                    this.canvas = canvas;
-                    this.ctx = ctx;
-                    that.dpr = dpr;
-                    canvas.width = 750 * dpr
-                    canvas.height = 1334 * dpr
-                    ctx.scale(dpr, dpr)
-                    resolve(this)
-                })
-        })
-    }
-    // 将对象转换成一个数组按照绘画顺序的
-    initPosterObj(posterObj) {
-        verfiyObjEmpty(posterObj);
-        this.posterImages=[];
-        this.posterFonts=[];
-        this.posterDifferentShapes=[];
-        this.posterBase64images = [];
-        let objNames = Object.keys(posterObj);
-        for (let i = 0; i < objNames.length; i++) {
-            // 背景图片
-            if (posterObj[objNames[i]].type === TYPES.BG_IMG) {
-                this.posterImages.unshift(posterObj[objNames[i]]);
-            }
-            // 普通图片
-            if (posterObj[objNames[i]].type === TYPES.IMG) {
-                this.posterImages.push(posterObj[objNames[i]]);
-            }
-            // 文字
-            if (posterObj[objNames[i]].type === TYPES.TEXT) {
-                this.posterFonts.push(posterObj[objNames[i]]);
-            }
-            //shapes
-            if(posterObj[objNames[i]].type === TYPES.SHAPE) {
-                this.posterDifferentShapes.push(posterObj[objNames[i]]);
-            }
-            // base64
-            if (posterObj[objNames[i]].type === TYPES.BASE64) {
-                this.posterBase64images.push(posterObj[objNames[i]]);
-            }
-        }
-    }
-    // 初始化所有的图片资源
-    initImages(arr,canvas) {
-        let imgLoadPromise = [];
-        for (let j = 0; j < arr.length; j++) {
-            let p = new Promise((resolve, reject) => {
-                let img = canvas.createImage()
-                img.crossOrigin = 'anonymous';
-                img.src = arr[j].src;
-                img.onload = function () {
-                    console.log('img-onload');
-                    arr[j].imgOnload = img;
-                    resolve(true);
-                };
-                img.onerror = function(error) {
-                    reject(error)
-                }
-            });
-            imgLoadPromise.push(p);
-        }
-        return PromiseAllSettled(imgLoadPromise);
-    }
-    judgeIfQrcodeImage(image) {
-        return ['qrcode', 'fingerprint'].includes(image.label);
-    }
-    judgeIfAvatarImage(image) {
-        return ['avatar', 'avatarBorder'].includes(image.label);
-    }
-    drawAvatar() {
-        const avatarImages = this.posterImages.filter(this.judgeIfAvatarImage);
-        avatarImages.forEach(image => {
-            drawImage(this.ctx, image, this.proportion);
-        });
-    }
-
-    drawQrcode() {
-        const qrcodeImages = this.posterImages.filter(this.judgeIfQrcodeImage);
-        qrcodeImages.forEach(image => {
-            drawImage(this.ctx, image, this.proportion);
-        });
-    }
-    getTextRect(text) {
-        if (!text) return {};
-        initTextStyle(this.ctx,text);
-        const { width } = this.ctx.measureText(text.value);
-        const isMultiLine = width > text.maxWidth;
-        const lineNum = isMultiLine ? Math.ceil(width / text.maxWidth) : 1;
-        const everyLineHeight = text.lineHeight;
-        return {
-            width: Math.min(width, text.maxWidth),
-            height: lineNum * everyLineHeight
-        };
-    }
-    getImageRect(src,canvas){
-        return new Promise((resolve, reject) => {
-            let img = canvas.createImage()
-            img.crossOrigin = 'anonymous';
-            img.src = src;
-            img.onload = function () {
-                resolve({
-                    width: img.width,
-                    height:img.height
-                });
-            };
-            img.onerror = function(error) {
-                reject(error)
-            }
-        });
-    }
-    // 开始画画
-    draw() {
-        this.drawImgs();
-        this.drawDifferentShape();
-        this.drawFonts();
-        this.drawAvatar();
-        this.drawQrcode();
-    }
-    drawBase64() {
-        for (let i = 0; i < this.posterBase64images.length; i++) {
-            drawBase64Img(this.ctx, this.posterBase64images[i], this.proportion, this.posterBase64images[i].src,this.canvas);
-        }
-    }
-    drawImgs() {
-        let posterImages = this.posterImages.filter(image => image.imgOnload)
-        // 滤除头像
-            .filter(image => !this.judgeIfAvatarImage(image))
-        // 滤除二维码
-            .filter(image => !this.judgeIfQrcodeImage(image));
-        for (let i = 0; i < posterImages.length; i++) {
-            drawImage(this.ctx, posterImages[i], this.proportion);
-        }
-    }
-    drawFonts() {
-        for (let i = 0; i < this.posterFonts.length; i++) {
-            if (this.posterFonts[i].textAlign === "center") {
-                initTextStyle(this.ctx,this.posterFonts[i]);
-                this.posterFonts[i].x = 750 / 2 - this.getTextRect(this.posterFonts[i]).width / 2;
-            }
-            drawText(this.ctx,this.posterFonts[i]);
-        }
-    }
-    drawDifferentShape(){
-        for (let i = 0; i < this.posterDifferentShapes.length; i++) {
-            roundRect(this.ctx, this.posterDifferentShapes[i], this.proportion);
-        }
-    }
-    convertToImg(posterObj) {
-        // 初始化传入的对象    为什么要做这一步:绘图的先后顺序
-        this.initPosterObj(posterObj);
-        const that = this
-        return new Promise(async (results) => {
-            try {
-                await this.initImages(this.posterImages,this.canvas);
-                this.draw();
-                this.img = that.canvas.toDataURL('image/png');
-                results(this.img);
-            } catch (e) {
-                console.error(e);
-            }
-        });
-    }
-    clearCanvas() {
-        this.canvas._canvasRef.attributes[2].nodeValue = "display:none";
-    }
-}
-
-export default objToPoster;
+// obj img font shape
+import { drawImage, drawText, drawBase64Img, roundRect,initTextStyle } from './utils/drawImage.js';
+import { verfiyObjEmpty,PromiseAllSettled } from './utils/util';
+import { TYPES } from '../libs/constant';
+
+class objToPoster {
+    // posterObj-元素对象 imgWidth-图片宽（单位默认px） imgHeight-图片长（单位默认px） proportion（图片精度-越大精度越高）
+    constructor( imgWidth = 300, imgHeight = 700, proportion = 1,that) {
+        this.ctx = null;
+        this.canvas = null;
+        // 生成的海报
+        this.img = null;
+        this.proportion = proportion;
+        // 绘制的所有图片 文字默认再图片上面 == 所以先画图片再画文字的
+        this.posterImages = [];
+        // base64图片
+        this.posterBase64images = [];
+        // 绘制所有的文字
+        this.posterFonts = [];
+        //绘制所有的不同的形状
+        this.posterDifferentShapes = [];
+        // 初始化canvas元素
+        // this.initCanvas(that);
+    }
+    initCanvas(that,dpr = wx.getSystemInfoSync().pixelRatio) {
+        return new Promise((resolve,reject)=>{
+            wx.createSelectorQuery().in(that)
+                .select('#customCanvas')
+                .fields({
+                    node:true,size:true
+                })
+                .exec(res=>{
+                    const canvas = res[0].node
+                    const ctx = canvas.getContext('2d')
+                    this.canvas = canvas;
+                    this.ctx = ctx;
+                    that.dpr = dpr;
+                    canvas.width = 750 * dpr
+                    canvas.height = 1334 * dpr
+                    ctx.scale(dpr, dpr)
+                    resolve(this)
+                })
+        })
+    }
+    // 将对象转换成一个数组按照绘画顺序的
+    initPosterObj(posterObj) {
+        verfiyObjEmpty(posterObj);
+        this.posterImages=[];
+        this.posterFonts=[];
+        this.posterDifferentShapes=[];
+        this.posterBase64images = [];
+        let objNames = Object.keys(posterObj);
+        for (let i = 0; i < objNames.length; i++) {
+            // 背景图片
+            if (posterObj[objNames[i]].type === TYPES.BG_IMG) {
+                this.posterImages.unshift(posterObj[objNames[i]]);
+            }
+            // 普通图片
+            if (posterObj[objNames[i]].type === TYPES.IMG) {
+                this.posterImages.push(posterObj[objNames[i]]);
+            }
+            // 文字
+            if (posterObj[objNames[i]].type === TYPES.TEXT) {
+                this.posterFonts.push(posterObj[objNames[i]]);
+            }
+            //shapes
+            if(posterObj[objNames[i]].type === TYPES.SHAPE) {
+                this.posterDifferentShapes.push(posterObj[objNames[i]]);
+            }
+            // base64
+            if (posterObj[objNames[i]].type === TYPES.BASE64) {
+                this.posterBase64images.push(posterObj[objNames[i]]);
+            }
+        }
+    }
+    // 初始化所有的图片资源
+    initImages(arr,canvas) {
+        let imgLoadPromise = [];
+        for (let j = 0; j < arr.length; j++) {
+            let p = new Promise((resolve, reject) => {
+                let img = canvas.createImage()
+                img.crossOrigin = 'anonymous';
+                img.src = arr[j].src;
+                img.onload = function () {
+                    console.log('img-onload');
+                    arr[j].imgOnload = img;
+                    resolve(true);
+                };
+                img.onerror = function(error) {
+                    reject(error)
+                }
+            });
+            imgLoadPromise.push(p);
+        }
+        return PromiseAllSettled(imgLoadPromise);
+    }
+    judgeIfQrcodeImage(image) {
+        return ['qrcode', 'fingerprint'].includes(image.label);
+    }
+    judgeIfAvatarImage(image) {
+        return ['avatar', 'avatarBorder'].includes(image.label);
+    }
+    drawAvatar() {
+        const avatarImages = this.posterImages.filter(this.judgeIfAvatarImage);
+        avatarImages.forEach(image => {
+            drawImage(this.ctx, image, this.proportion);
+        });
+    }
+
+    drawQrcode() {
+        const qrcodeImages = this.posterImages.filter(this.judgeIfQrcodeImage);
+        qrcodeImages.forEach(image => {
+            drawImage(this.ctx, image, this.proportion);
+        });
+    }
+    getTextRect(text) {
+        if (!text) return {};
+        initTextStyle(this.ctx,text);
+        const { width } = this.ctx.measureText(text.value);
+        const isMultiLine = width > text.maxWidth;
+        const lineNum = isMultiLine ? Math.ceil(width / text.maxWidth) : 1;
+        const everyLineHeight = text.lineHeight;
+        return {
+            width: Math.min(width, text.maxWidth),
+            height: lineNum * everyLineHeight
+        };
+    }
+    getImageRect(src,canvas){
+        return new Promise((resolve, reject) => {
+            let img = canvas.createImage()
+            img.crossOrigin = 'anonymous';
+            img.src = src;
+            img.onload = function () {
+                resolve({
+                    width: img.width,
+                    height:img.height
+                });
+            };
+            img.onerror = function(error) {
+                reject(error)
+            }
+        });
+    }
+    // 开始画画
+    draw() {
+        this.drawImgs();
+        this.drawDifferentShape();
+        this.drawFonts();
+        this.drawAvatar();
+        this.drawQrcode();
+    }
+    drawBase64() {
+        for (let i = 0; i < this.posterBase64images.length; i++) {
+            drawBase64Img(this.ctx, this.posterBase64images[i], this.proportion, this.posterBase64images[i].src,this.canvas);
+        }
+    }
+    drawImgs() {
+        let posterImages = this.posterImages.filter(image => image.imgOnload)
+        // 滤除头像
+            .filter(image => !this.judgeIfAvatarImage(image))
+        // 滤除二维码
+            .filter(image => !this.judgeIfQrcodeImage(image));
+        for (let i = 0; i < posterImages.length; i++) {
+            drawImage(this.ctx, posterImages[i], this.proportion);
+        }
+    }
+    drawFonts() {
+        for (let i = 0; i < this.posterFonts.length; i++) {
+            if (this.posterFonts[i].textAlign === "center") {
+                initTextStyle(this.ctx,this.posterFonts[i]);
+                this.posterFonts[i].x = 750 / 2 - this.getTextRect(this.posterFonts[i]).width / 2;
+            }
+            drawText(this.ctx,this.posterFonts[i]);
+        }
+    }
+    drawDifferentShape(){
+        for (let i = 0; i < this.posterDifferentShapes.length; i++) {
+            roundRect(this.ctx, this.posterDifferentShapes[i], this.proportion);
+        }
+    }
+    convertToImg(posterObj) {
+        // 初始化传入的对象    为什么要做这一步:绘图的先后顺序
+        this.initPosterObj(posterObj);
+        const that = this
+        return new Promise(async (results) => {
+            try {
+                await this.initImages(this.posterImages,this.canvas);
+                this.draw();
+                this.img = that.canvas.toDataURL('image/png');
+                results(this.img);
+            } catch (e) {
+                console.error(e);
+            }
+        });
+    }
+    clearCanvas() {
+        this.canvas._canvasRef.attributes[2].nodeValue = "display:none";
+    }
+}
+
+export default objToPoster;