xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/SharePoster/components/unauthorizedModal/index.js

@@ -0,0 +1,35 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+  },
+
+  /**
+ * 生命周期函数--监听页面显示
+ */
+  ready: function () {
+    
+  },
+
+  /**
+   *  计算属性
+   */
+  computed: {
+   },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    closeModal() {
+      this.triggerEvent('close')
+    }
+  }
+})

package/miniprogram_dist/SharePoster/components/unauthorizedModal/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "usingComponents": {
+  }
+}

package/miniprogram_dist/SharePoster/components/unauthorizedModal/index.wxml

@@ -0,0 +1,11 @@
+<view class="setting-modal" catchtap="closeModal">
+    <view class="main-box">
+        <view class="content-box" catchtap>
+            <view class="title">无法保存</view>
+            <view class="content">请在iPhone的“设置-隐私-照片”选项中，允许微信访问你的照片。</view>
+        </view>
+        <view class="btn">
+            <view class="cancel" catchtap="closeModal">好</view>
+        </view>
+    </view>
+</view>

package/miniprogram_dist/SharePoster/components/unauthorizedModal/index.wxss

@@ -0,0 +1,51 @@
+.setting-modal {
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.main-box {
+  width: 576rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 176rpx;
+}
+.content-box {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 48rpx;
+}
+.setting-modal .title {
+  color: #333;
+  font-size: 32rpx;
+  font-weight: 500;
+  text-align: center;
+  line-height: 48rpx;
+  margin-bottom: 16rpx;
+}
+.content-box .content {
+  font-size: 28rpx;
+  font-weight: 400;
+  line-height: 40rpx;
+  color: #666;
+  text-align: center;
+}
+.setting-modal .btn {
+  display: flex;
+}
+.setting-modal .btn .cancel {
+  flex: 1;
+  height: 96rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #1472FF;
+  font-weight: 500;
+  line-height: 48rpx;
+  box-shadow: inset 0 0.1rpx 0 0 #ebebeb;
+}

package/miniprogram_dist/SharePoster/createPoster/index.js

@@ -0,0 +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;

package/miniprogram_dist/SharePoster/createPoster/utils/drawImage.js

@@ -0,0 +1,267 @@
+import { TYPES, TEXT_OVERFLOW } from '../../libs/constant';
+export function drawImage(ctx, obj, proportion) {
+    let h = obj.height*proportion;
+    let w = obj.width*proportion;
+    let x = obj.x * proportion;
+    let y = obj.y * proportion;
+    ctx.beginPath();
+    // 恢复裁剪前的状态
+    ctx.restore();
+    ctx.save();
+    // 裁剪
+    if (obj.border) {
+        console.log(obj);
+        // 正方形
+        if (w === h) {
+            ctx.arc(
+                (w * proportion) / 2 + obj.x * proportion,
+                (w * proportion) / 2 + obj.y * proportion,
+                obj.border * proportion,
+                0,
+                Math.PI * 2,
+                true
+            );
+            ctx.clip();
+        }
+        // 圆角矩形图片
+        else {
+        }
+    } else {
+        if(obj.imgRoundType === 'halfRoundRect'){
+            ctx.moveTo(x,y+h);
+            ctx.lineTo(x,y+24);
+            ctx.quadraticCurveTo(x,y,x+24,y);
+            ctx.lineTo(x+w-24,y);
+            ctx.quadraticCurveTo(x+w,y,x+w,y+24);
+            ctx.lineTo(x+w,y+h);
+            ctx.lineTo(x,y+h);
+            ctx.lineWidth = 0.5;
+            ctx.stroke()
+            ctx.clip();
+        }else if(obj.imgRoundType === 'fullRoundRect'){
+            ctx.moveTo(x,y+h-24);
+            ctx.lineTo(x,y+24);
+            ctx.quadraticCurveTo(x,y,x+24,y);
+            ctx.lineTo(x+w-24,y);
+            ctx.quadraticCurveTo(x+w,y,x+w,y+24);
+            ctx.lineTo(x+w,y+h-24);
+            ctx.quadraticCurveTo(x+w,y+h,x+w-24,y+h);
+            ctx.lineTo(x+24,y+h);
+            ctx.quadraticCurveTo(x,y+h,x,y+h-24);
+            ctx.lineWidth = 0.5;
+            ctx.stroke()
+            ctx.clip();
+        }else if(obj.imgRoundType === 'top'){
+            ctx.moveTo(x, y + h);
+            ctx.lineTo(x, y + 24);
+            ctx.arcTo(x, y, x + 24, y, 24);
+            ctx.lineTo(x + w - 24, y);
+            ctx.arcTo(x + w, y, x + w, y + 24, 24);
+            ctx.lineTo(x + w, y + h);
+            ctx.lineTo(x, y + h);
+            ctx.lineWidth = 0.5;
+            ctx.stroke()
+            ctx.clip();
+        }
+    }
+    ctx.drawImage(
+        obj.imgOnload,
+        obj.x * proportion,
+        obj.y * proportion,
+        obj.width * proportion,
+        obj.height * proportion
+    );
+    ctx.closePath();
+    ctx.restore();  //恢复裁剪前的状态，不然会影响其它字体的显示 
+}
+export function drawBase64Img(ctx, obj, proportion, base64,canvas) {
+    let img = canvas.createImage()
+    img.src = base64;
+    obj.imgOnload = img;
+    drawImage(ctx, obj, proportion);
+}
+export function handleDefaultProps(props) {
+    const result = props;
+    switch (props.type) {
+    case TYPES.TEXT:
+        result.x = props.x || 0;
+        result.y = props.y || 0;
+        result.maxWidth = props.maxWidth || 400;
+        result.fontSize = props.size || 12;
+        result.lineHeight = props.lineHeight || props.size;
+        result.fontWeight = props.fontWeight || 'normal'; // normal lighter bold border
+        result.fontFamily = props.fontFamily || 'Arial,sans-serif';
+        result.color = props.color || 'black';
+        result.textBaseline = props.textBaseline || 'hanging';
+        result.textOverflow = props.textOverflow || TEXT_OVERFLOW.ELLIPSIS;
+        result.textStyle = props.textStyle || 'fill';
+        break;
+
+    case TYPES.IMG:
+        result.x = props.x || 0;
+        result.y = props.y || 0;
+        result.width = props.width;
+        result.height = props.height;
+        result.borderRadius = props.borderRadius || 0;
+        break;
+
+    case TYPES.BG_IMG:
+        result.x = 0;
+        result.y = 0;
+        result.width = this.width;
+        result.height = this.height;
+        result.borderRadius = props.borderRadius || 0;
+        break;
+
+    case TYPES.SHAPE:
+        result.x = props.x || 0;
+        result.y = props.y || 0;
+        result.color = props.color || 'black';
+        result.width = props.width;
+        result.height = props.height;
+        result.borderRadius = props.borderRadius || 0;
+        break;
+
+    default:
+        break;
+    }
+    return result;
+}
+export function drawText(ctx,obj) {
+    let { value, textOverflow } = handleDefaultProps(obj);
+    if (!value) return;
+
+    ctx.save();
+    initTextStyle(ctx,obj);
+
+    const drawFnMap = {
+        [TEXT_OVERFLOW.WRAP]: drawMultiLineWrapText,
+        [TEXT_OVERFLOW.ELLIPSIS]: drawSingleLineEllipsisText
+    };
+
+    const fn = drawFnMap[textOverflow];
+    if (fn) {
+        fn(obj,ctx);
+    } else {
+        ctx.beginPath();
+        fillText(value, obj,ctx);
+        ctx.closePath();
+    }
+    ctx.restore();
+}
+export function fillText(text, obj,ctx) {
+    let { x, y, color, textStyle, fontSize } = handleDefaultProps(obj);
+    ctx.fillText(text, x, y);
+    if (textStyle === 'stroke') {
+        const textWidth = ctx.measureText(text).width;
+        const strokeLineY = y +  fontSize / 2-5;
+        ctx.rect(x, strokeLineY, textWidth, 2);
+        ctx.fillStyle = color;
+        ctx.fill();
+    }
+}
+export function initTextStyle(ctx,obj) {
+    let { fontSize, fontWeight, fontFamily, color, textBaseline } = handleDefaultProps(obj);
+
+    ctx.fillStyle = color;
+    ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    ctx.textBaseline = textBaseline;
+}
+export function drawMultiLineWrapText (obj,ctx) {
+    ctx.beginPath();
+    let { value, x, y, lineHeight, fontSize, maxWidth } = handleDefaultProps(obj);
+    const charArr = value.split('');
+    let currentLineText = '';
+    for (let i = 0; i < charArr.length; i++) {
+        const char = charArr[i];
+        const { width } = ctx.measureText(`${currentLineText}${char}`);
+
+        if (width > maxWidth) {
+            ctx.fillText(currentLineText, x, y);
+            // 因为加上这个 char 使得当前行超出宽度限制，所以这个字符变成下一行的首字
+            currentLineText = char;
+            // y 加上行高
+            y += lineHeight;
+        } else {
+            currentLineText += char;
+        }
+    }
+    ctx.fillText(currentLineText, x, y);
+    ctx.closePath();
+};
+export function drawSingleLineEllipsisText ( obj,ctx) {
+    ctx.beginPath();
+    let { value, x, y, maxWidth } = handleDefaultProps(obj);
+    const charArr = value.split('');
+    let sumText = '';
+    for (let i = 0; i < charArr.length; i++) {
+        const char = charArr[i];
+        const { width } = ctx.measureText(`${sumText}${char}`);
+
+        if (width > maxWidth) {
+            sumText += '...';
+            ctx.fillText(sumText, x, y);
+            break;
+        } else {
+            sumText += char;
+        }
+    }
+    fillText(sumText, obj, ctx);
+    ctx.closePath();
+};
+export function roundRect( ctx,obj,proportion){
+    let shapes = ['fullRoundRect','diagonalRoundRect','topRoundRect','bottomRoundRect'];
+    let {x, y, width, height, r} = obj;
+    x = x * proportion;
+    y = y * proportion;
+    let w = width * proportion;
+    let h = height * proportion;
+    r = r * proportion;
+    let color = obj.color;
+    let shape = obj.shape;
+    if(w<2*r)r = w/2;
+    if(h<2*r)r = h/2;
+    ctx.beginPath();
+    // 恢复裁剪前的状态
+    ctx.restore();
+    ctx.save();
+    ctx.moveTo(x+r,y);
+    if(shape === shapes[0]){
+        //画四个角都是圆形
+        ctx.arcTo(x+w, y, x+w, y+h, r);
+        ctx.arcTo(x+w, y+h, x, y+h, r);
+        ctx.arcTo(x, y+h, x, y, r);
+        ctx.arcTo(x, y, x+w, y, r);
+    }else if(shape === shapes[1]){
+        //只有右上角和左下角为圆形
+        ctx.arcTo(x+w, y, x+w, y+h, r);
+        ctx.lineTo(x+w,y+h);
+        ctx.lineTo(x+r,y+h)
+        ctx.arcTo(x, y+h, x, y, r);
+        ctx.lineTo(x,y);
+        ctx.lineTo(x+r,y);
+    }else if (shape === shapes[2]) {
+        ctx.moveTo(x, y + h);
+        ctx.lineTo(x, y + r);
+        ctx.arcTo(x, y, x + r, y, r);
+        ctx.lineTo(x + w - r, y);
+        ctx.arcTo(x + w, y, x + w, y + r, r);
+        ctx.lineTo(x + w, y + h);
+        ctx.lineTo(x, y + h);
+        ctx.clip();
+    }else if (shape === shapes[3]) {
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + w, y);
+        ctx.lineTo(x + w, y + h - r);
+        ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+        ctx.lineTo(x + r, y + h);
+        ctx.arcTo(x, y + h, x, y + h - r, r);
+        ctx.lineTo(x, y);
+        ctx.clip();
+    }
+    ctx.closePath();
+    ctx.lineWidth = h;
+    ctx.strokeStyle = color;
+    ctx.stroke();
+    ctx.restore();
+}

package/miniprogram_dist/SharePoster/createPoster/utils/util.js

@@ -0,0 +1,40 @@
+export function verfiyObjEmpty(obj) {
+    if (Object.prototype.toString(obj) !== '[object Object]') {
+        console.error('objToPoster的第一个参数必须为一个对象');
+        return;
+    }
+    if (JSON.stringify(obj) === '{}' && !Object.getOwnPropertySymbols(obj).length) {
+        console.error('objToPoster的第一个参数不能为空对象');
+        return;
+    }
+}
+// 因为旧设备兼容问题iphone5s等旧机型使用 Promise.allSettled 报错，所以单独实现一个allSettled
+export function PromiseAllSettled(promises = []) {
+    if (!promises.length) return Promise.resolve([]);
+
+    return new Promise(resolve => {
+        let count = promises.length;
+        const results = [];
+        for (let i = 0; i < promises.length; i++) {
+            promises[i].then(
+                value => {
+                    results[i] = {
+                        status: 'fulfilled',
+                        value
+                    };
+                    count--;
+                    if (count <= 0) resolve(results);
+                },
+                reason => {
+                    results[i] = {
+                        status: 'rejected',
+                        reason
+                    };
+                    count--;
+                    if (count <= 0) resolve(results);
+                }
+            );
+        }
+    });
+}
+

package/miniprogram_dist/SharePoster/libs/constant.js

@@ -0,0 +1,57 @@
+export const POPUP_DURATION = 300
+export const POSTER_CLS = {
+    INTERACT_ONE: 'interact_one_cls',
+    INTERACT_TWO: 'interact_two_cls',
+    INTERACT_THREE: 'interact_three_cls',
+    ALIVE: 'alive_cls',
+    ALIVE_GENERAL: 'alive_general_cls',
+    ALIVE_SPECIFIC: 'alive_specific_cls',
+    PRICE_ONE: 'price_one_cls',
+    PRICE_TWO: 'price_two_cls',
+    ENTITY: 'entity_cls',
+    STUDY: 'study_cls',
+    USER_CUSTOM: 'user_custom'
+};
+
+export const RESOURCE_TYPE = {
+    IMAGE_TEXT: 1, // 图文
+    AUDIO: 2, // 音频
+    VIDEO: 3, // 视频
+    ALIVE: 4, // 直播
+    MEMBER: 5, // 会员
+    COLUMN: 6, // 专栏
+    COMMUNITY: 7, // 社群
+    TOPIC: 8, // 大专栏
+    ACTIVITY: 9, // 活动
+    PUNCH_CARD: 16, // 打卡
+    BOOK: 20, // 电子书
+    ENTITY_GOODS: 21, // 实物商品
+    CAMP: 25, // 训练营
+    OFF_LINE: 29, // 线下课
+    SMALL_CLASS: 31, // 小班课
+    PRACTICE: 34, // 练习
+    BIG_CLASS: 35, // 班课
+    SUPER_VIP: 23, // 超级会员
+    AI_COURSE: 45, // AI互动课
+
+    MARKETING_LIMIT_DISCOUNT: 3, // 限时折扣
+    MARKETING_FRIEND_HELP: 4, // 好友助力
+    MARKETING_FISSION_POSTER: 5, // 裂变海报
+    MARKETING_TEAM_BUY: 6, // 拼团
+    MARKETING_SEC_KILL: 8, // 秒杀
+    MARKETING_CUT_PRICE: 10 // 砍价
+};
+export const TYPES = {
+    BG_IMG: 'background-img',
+    IMG: 'img',
+    TEXT: 'font',
+    SHAPE: 'shapes',
+    BASE64:'base64',
+};
+export const TEXT_OVERFLOW = {
+    WRAP: 'wrap',
+    ELLIPSIS: 'ellipsis'
+};
+// loading 前的等待时间（ms）
+// 主要用来防止 loading 闪烁，此时间不宜设置过长。
+export const LOADING_DELAY = 500;