xiaoe_mp_npm 0.2.1 → 0.2.2-beta1

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

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

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

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

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

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

@@ -1,51 +0,0 @@
-.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

@@ -1,201 +0,0 @@
-// 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

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

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

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