uni-app 海報

海報方案

目前主要的方案有：

  • 服務(wù)端生成

  • 客戶端生成

  • 服務(wù)端 + 客戶端

一、客戶端生成方案對比

1.1 爸媽搜海報

功能特色

  • 支持圖片類型
  • 支持文字類型
  • 支持圖片圓形裁剪

使用方法

  • 1、 在微信小程序管理后臺——設(shè)置——第三方服務(wù)，按 AppID（wxbf07f0f22c6c200d）搜索到該插件并申請授權(quán)。

  • 2、在小程序項目中的 pages.json 文件中引入插件聲明。

    "plugins": {
    "poster": {
        "version": "1.0.0",
        "provider": "wxbf07f0f22c6c200d"
    }
}

  • 3、在需要使用到該插件的小程序頁面的配置文件中，做以下配置：

    "usingComponents": {
    "poster": "plugin://poster/poster"
}

  • 4、在相應(yīng)的 vue 頁面中添加以下語句即可完成插件的嵌入。

    <poster :drawing="drawing" :savebtnText="savebtnText" canvas-style="canvas-style" savebtn-style="savebtn-style"/>

<details><summary>例子代碼（點擊展開）</summary>

drawing: [{
        type: 'image',
        url: 'https://i.loli.net/2018/10/30/5bd85117675b3.png',
        left: 0,
        top: 0,
        width: 650,
        height: 960
    },
    {
        type: 'text',
        content: '咖啡',
        fontSize: 26,
        color: 'white',
        textAlign: 'left',
        left: 170,
        top: 50,
        width: 650
    }
]

</details>

1.2 Painter

功能特色

  • borderWidth 和 borderColor 屬性支持，可設(shè)置邊框
  • image 加入 mode 屬性
  • fontFamily 屬性支持
  • 支持漸變色
  • 支持 box-shadow 和 text-shadow，統(tǒng)一使用 shadow 表示。
  • text 加入 background 屬性。
  • 可獲取 text 的寬度
  • 支持元素的相對定位方法
  • 可通過文本中的換行符進(jìn)行主動換行
  • 生成的圖片支持分辨率調(diào)節(jié)

使用 Painter

  • 1、 引入代碼

    Painter 的核心代碼在另一個 repo 中。你可以通過 submodule 的方式進(jìn)行庫的引入。有關(guān) submodule 的用法可自行 Google。

    git submodule add https://github.com/Kujiale-Mobile/PainterCore.git wxcomponents/painter

  • 2、 作為自定義組件引入，注意目錄為第一步引入的代碼所在目錄

    "usingComponents":{
    "painter": "/wxcomponents/painter/painter"
}

  • 3、 組件接收 palette 字段作為畫圖數(shù)據(jù)的數(shù)據(jù)源, 圖案數(shù)據(jù)以json形式存在，推薦使用“皮膚模板”的方法進(jìn)行傳遞，示例代碼如下：

    <painter :customStyle="customStyle" @imgOK="onImgOk" :palette="template" :dirty="true" />

    你可以通過設(shè)置 widthPixels 來強制指定生成的圖片的像素寬度，否則，會根據(jù)你畫布中設(shè)置的大小來動態(tài)調(diào)節(jié)，比如你用了 rpx，則在 iphone 6 上會生成 0.5 倍像素的圖片。由于 canvas 繪制的圖片像素直接由 Canvas 本身大小決定，此處通過同比例放大整個畫布來實現(xiàn)對最后生成的圖片大小的調(diào)節(jié)。

    <painter :customStyle="customStyle" @imgOK="onImgOk" :palette="template" :dirty="true" widthPixels="1000"/>

  • 4、 數(shù)據(jù)傳入后，則會自動進(jìn)行繪圖。繪圖完成后，你可以通過綁定 imgOK 或 imgErr 事件來獲得成功后的圖片 或失敗的原因。

    @imgOK="onImgOK"
@imgErr="onImgErr"

onImgOK(e) {
    // 其中 e.detail.path 為生成的圖片路徑
},

<details><summary>例子代碼（點擊展開）</summary>

template: {
    width: '654rpx',
    height: '600rpx',
    background: '#eee',
    views: [{
            type: 'rect',
            css: {
                top: '40rpx',
                left: '327rpx',
                color: 'rgba(255, 0, 0, 0.5)',
                width: '5rpx',
                height: '500rpx'
            }
        },
        {
            type: 'image',
            url: '/palette/avatar.jpg',
            css: {
                top: '40rpx',
                left: '327rpx',
                width: '100rpx',
                height: '100rpx'
            }
        },
        {
            type: 'qrcode',
            content: '/palette/avatar.jpg',
            css: {
                top: '180rpx',
                left: '327rpx',
                width: '120rpx',
                height: '120rpx'
            }
        },
        {
            type: 'text',
            text: "align: 'left' 或者不寫",
            css: {
                top: '320rpx',
                left: '327rpx',
                fontSize: '30rpx'
            }
        }
    ]
}

</details>

1.3 wxa-plugin-canvas

功能特色

  • borderWidth 和 borderColor 屬性支持，可設(shè)置邊框
  • borderRadius 圓角支持
  • 圖片支持
  • 文字支持
  • 塊狀支持
  • zindex 層級支持
  • 下劃線支持
  • 生成的圖片支持分辨率調(diào)節(jié)

使用方法

  • 1、引入代碼

    直接通過 git 下載 wxa-plugin-canvas 源代碼，并將miniprogram_dist目錄拷貝到自己的項目組件目錄中

  • 2、作為自定義組件引入

    "usingComponents": {
    "poster": "/wxcomponents/wxa-plugin-canvas/poster",
}

  • 3、在相應(yīng)的 vue 頁面中添加以下語句即可完成插件的嵌入。

    <poster id="poster" :config="posterConfig" @success="onPosterSuccess" @fail="onPosterFail">
    <button>點擊生成海報</button>
</poster>

<details><summary>例子代碼（點擊展開）</summary>

posterConfig: {
    width: 750,
    height: 1334,
    backgroundColor: '#fff',
    debug: false,
    pixelRatio: 1,
    blocks: [{
            width: 690,
            height: 808,
            x: 30,
            y: 183,
            borderWidth: 2,
            borderColor: '#f0c2a0',
            borderRadius: 20
        },
        {
            width: 634,
            height: 74,
            x: 59,
            y: 770,
            backgroundColor: '#fff',
            opacity: 0.5,
            zIndex: 100
        },
    ],
    texts: [{
            x: 30,
            y: 113,
            baseLine: 'top',
            text: '發(fā)現(xiàn)一個好物，推薦給你呀',
            fontSize: 38,
            color: '#080808'
        },
        {
            x: 59,
            y: 895,
            baseLine: 'middle',
            text: [{
                    text: '2人拼',
                    fontSize: 28,
                    color: '#ec1731'
                },
                {
                    text: '￥99',
                    fontSize: 36,
                    color: '#ec1731',
                    marginLeft: 30
                }
            ]
        },
        {
            x: 522,
            y: 895,
            baseLine: 'middle',
            text: '已拼2件',
            fontSize: 28,
            color: '#929292'
        },
        {
            x: 59,
            y: 945,
            baseLine: 'middle',
            text: [{
                    text: '商家發(fā)貨&售后',
                    fontSize: 28,
                    color: '#929292'
                },
                {
                    text: '七天退貨',
                    fontSize: 28,
                    color: '#929292',
                    marginLeft: 50
                },
                {
                    text: '運費險',
                    fontSize: 28,
                    color: '#929292',
                    marginLeft: 50
                }
            ]
        },
        {
            x: 360,
            y: 1065,
            baseLine: 'top',
            text: '長按識別小程序碼',
            fontSize: 38,
            color: '#080808'
        },
        {
            x: 360,
            y: 1123,
            baseLine: 'top',
            text: '超值好貨一起拼',
            fontSize: 28,
            color: '#929292'
        },
    ],
    images: [{
            width: 62,
            height: 62,
            x: 30,
            y: 30,
            borderRadius: 62,
            url: 'https://lc-I0j7ktVK.cn-n1.lcfile.com/02bb99132352b5b5dcea.jpg'
        },
        {
            width: 634,
            height: 634,
            x: 59,
            y: 210,
            url: 'https://lc-I0j7ktVK.cn-n1.lcfile.com/193256f45999757701f2.jpeg'
        }
    ]
}

</details>

1.4 mp_canvas_drawer

功能特色

  • 繪制文本（換行、超出內(nèi)容省略號、中劃線、下劃線、文本加粗）
  • 繪制圖片
  • 繪制矩形
  • 多圖繪制

使用方法

  • 1、引入代碼

    直接通過 git 下載 mp_canvas_drawer 源代碼，并將 canvasdrawer 目錄拷貝到自己的項目組件目錄中

  • 2、作為自定義組件引入

    "usingComponents": {
    "poster": "/wxcomponents/canvasdrawer/canvasdrawer",
}

  • 3、在相應(yīng)的 vue 頁面中添加以下語句即可完成插件的嵌入。

    <canvasdrawer :painting="painting" @getImage="eventGetImage"/>

<details><summary>例子代碼（點擊展開）</summary>

painting: {
    width: 375,
    height: 555,
    views: [{
            type: 'image',
            url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531103986231.jpeg',
            top: 0,
            left: 0,
            width: 375,
            height: 555
        },
        {
            type: 'text',
            content: '您的好友【kuckboy】',
            fontSize: 16,
            color: '#402D16',
            textAlign: 'left',
            top: 33,
            left: 96,
            bolder: true
        },
        {
            type: 'text',
            content: '發(fā)現(xiàn)一件好貨，邀請你一起0元免費拿！',
            fontSize: 15,
            color: '#563D20',
            textAlign: 'left',
            top: 59.5,
            left: 96
        },
        {
            type: 'image',
            url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385366950.jpeg',
            top: 136,
            left: 42.5,
            width: 290,
            height: 186
        },
        {
            type: 'text',
            content: '正品MAC魅可口紅禮盒生日唇膏小辣椒Chili西柚情人',
            fontSize: 16,
            lineHeight: 21,
            color: '#383549',
            textAlign: 'left',
            top: 336,
            left: 44,
            width: 287,
            MaxLineNumber: 2,
            breakWord: true,
            bolder: true
        },
        {
            type: 'text',
            content: '￥0.00',
            fontSize: 19,
            color: '#E62004',
            textAlign: 'left',
            top: 387,
            left: 44.5,
            bolder: true
        },
        {
            type: 'text',
            content: '原價:￥138.00',
            fontSize: 13,
            color: '#7E7E8B',
            textAlign: 'left',
            top: 391,
            left: 110,
            textDecoration: 'line-through'
        },
        {
            type: 'text',
            content: '長按識別圖中二維碼幫我砍個價唄~',
            fontSize: 14,
            color: '#383549',
            textAlign: 'left',
            top: 460,
            left: 165.5,
            lineHeight: 20,
            MaxLineNumber: 2,
            breakWord: true,
            width: 125
        }
    ]
}

</details>

客戶端方案總體對比

名稱 爸媽搜海報 Painter wxa-plugin-canvas mp_canvas_drawer 內(nèi)部開發(fā)
類型 第三方插件 自定義組件 自定義組件 自定義組件 自定義組件
平臺差異說明 微信小程序 微信小程序 微信小程序 微信小程序 uni-app 平臺
接入成本 簡單快速 簡單快速 簡單快速 簡單快速 自定義開發(fā)
擴(kuò)展性 差 良好 良好 良好 --
平臺遷移 不支持 需開發(fā) 需開發(fā) 需開發(fā) 支持
開發(fā)周期 較短 較短 較短 較短 根據(jù)具體需求而定

未完待續(xù)......

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容