dobby-poster v1.0.1

概述

使用对象方式生成一个canvas画布并生成图片，可在移动端实现长按分享海报 对象中可以设置海报的文字及样式，图片大小、位置和遮罩形状

dobby是谁

是这货

安装

npm install dobby-poster

使用

HTML

<img src="" id="img">
<canvas id="canvas"></canvas>

JS

import Poster from 'dobby-poster'
new Poster({
        canvas: "#canvas", // canvas的css选择器
        width: window.innerWidth,   // canvas的宽度（选填）
        height: window.innerHeight, // canvas的搞度（选填）
        content: [            
            {
                type: "image",  //图片类型
                url: "//game.gtimg.cn/images/ulink/act/3195/a20200629my/bg9.jpg",  //图片地址
                top: "50vh",   //相对于canvas顶部的距离  （支持rem，vh,vw,不支持百分比）
                left: "0",      //相对于canvas左边的距离  （支持rem，vh,vw,不支持百分比）
                width: "7.5rem",    //图片宽度 （支持rem，vh,vw,不支持百分比）
                height: "16.20rem", //图片高度 （支持rem，vh,vw,不支持百分比）
                marginTop: "-8.1rem", //图片相对于canvas的上外边距 （支持rem，vh,vw,不支持百分比）
            },
            {
                type: "image",
                url: "http://thirdwx.qlogo.cn/mmopen/vi_32/o8z8JIpTZT4vmkfm6Olfq2VwAE2ibH7YU4G3P8iaPI26u9HQlFDwux7LSpHQ4yBRAB6JLt0VIZG07YScyYvkWGxA/132",
                top: "50vh",
                left: "50vw",
                width: "1.29rem",
                height: "1.29rem",
                marginLeft: "-2.77rem", //图片相对于canvas的左外边距 （支持rem，vh,vw,不支持百分比）
                marginTop: "4.25rem",
                mask: {
                    type: "circle" //圆形遮罩方式（circle | polygon）
                }
            },
            {
                type: "text", //文本类型
                text: "全服排名99", //文本内容
                fontSize: "1.13rem", //字体大小
                width:"7.5rem", //文本最大宽度
                fontWeight: "bold", //文本加粗
                color: "#f00", //文本颜色
                align: "center",  //文本对齐方式
                top: "50vh", 
                left: "0rem",
                marginTop:"-5.4rem"
            },
            
            {
                type: "image",
                url: "//game.gtimg.cn/images/ulink/act/3195/a20200629my/qrcode.png",
                top: "50vh",
                left: "50vw",
                width: "1.29rem",
                height: "1.29rem",
                marginLeft: "1.77rem",
                marginTop: "4.25rem",
                mask:{
                    type:"polygon", //多边形遮罩方式
                    point:[["0rem","0rem"],["1.29rem","0rem"],["0rem","1.29rem"]]  //多边形遮罩的顶点坐标（相对图片）
                }
            },
    
        ]
})

关于居中

由于需要生成移动端的海报，所以一般都是整平的，这时就需要设置居中 背景居中可以使用这个公式

{
    type: "image",
    url: "//game.gtimg.cn/images/ulink/act/3195/a20200629my/bg9.jpg",
    top:"50vh",     //top设置50vh 即高度的50%
    left:"0",  //left设置0或0rem
    width: "7.5rem",     //宽度设置7.5rem或100vw即100%的宽
    height: "16.20rem",   //高度设置和图片大小一直的高度即可
    marginTop: "-8.1rem", //上边距设置高度一半的相反数
}

元素居中与背景类似，top设置50vh,marginTop设置正值则是元素从垂直中点的位置向下的位移，负值相反 水平居中同理left设置50vw即50%的宽度,marginLeft设置正值则是元素从水平中点的位置向右的位移，负值相反