更新记录

v1.2(2019-06-24)

2019-6-22:修复海报在真机上不显示图片问题


平台兼容性

canvas生成海报


canvas生成海报,适用于商城海报分享功能
一款基于canvas的商品海报生成组件,可以根据图片比例生成商品海报图

使用方式:

script 中引用组件:

    import wmPoster from "@/components/wm-poster/wm-poster.vue"
    export default {
        components: {wmPoster}
    }

template 中使用组件:

    <wm-poster imgSrc="图片链接地址" QrSrc="二维码链接地址" Title="标题文本" PriceTxt="价格显示" OriginalTxt="划线价显示"></wm-poster>

属性说明:

属性 类型 默认值 说明
CanvasID String PosterCanvas 等同于canvas-id
imgSrc String 商品展示图链接
QrSrc String 二维码或太阳码链接
Title String 商品展示标题文本
TitleColor String #333333 商品展示标题颜色
LineType [String,Boolean] true 标题显示行数控制, true(最多显示两行多余用...), false(不做限制)
PriceTxt String 99.99 商品销售价
PriceColor String #e31d1a 商品销售价颜色
OriginalTxt String 199.99 商品划线价
OriginalColor String #b8b8b8 默认颜色(如划线价与扫描二维码提示颜色)
Width String 750 canvas画布宽度 (高度根据图片比例计算 单位upx)
CanvasBg String #ffffff canvas画布背景色
Referrer String quitter推荐给你 推荐人信息
ViewDetails String 长按或扫描识别二维码 描述提示文字

事件说明:

事件名称 说明
success 海报生成成功返回状态(包含生成的图片地址)

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问