微信小程序海报插件Painter 2.0（canvas画图）使用并保存图片到相册案例

一、下载与引入

Painter通过 json 数据形式，来进行动态渲染并绘制出图片。
Painter 的优势

• 功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制
• 布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转）
• 支持圆角，其中图片，矩形，和整个画布支持 borderRadius 来设置圆角
• 支持边框，同时支持 solid、dashed、dotted 三种类型
• 支持渐变色，包括线性渐变与径向渐变。
• 支持 box-shadow 和 text-shadow，统一使用 shadow 表示。
• 支持文字背景、获取宽度、主动换行
• 支持自定义字体
• 支持图片 mode
• 支持元素的相对定位方法
• 杠杠的性能优化，我们对网络素材图片加载实现了一套 LRU 存储机制，不用重复下载素材图片。
• 杠杠的容错，因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制，如果绘图出错会进行重绘。
• 生成的图片支持分辨率调节
• 支持使用拖动等操作动态编辑绘制内容

文件源码和文档地址：https://gitee.com/jackhunx/Painter

下载文件保存到components文件夹下

//在需要使用的页面json中引入
"usingComponents": {
   
    "painter":"/components/painter/painter"
}

二、使用

wxml

<!-- 海报弹框 -->
<van-popup show="{
   {isPosterShow}}" bind:close="closePosterFn" custom-style="background: none;">
    <view class="poster">
        <image bind:tap="saveImageFn" src="{
   {posterImageUrl}}" mode=""/>
        <text>点击图片，保存至手机相册</text>
    </view>
</van-popup>

<painter palette="{
   {posterData}}" bind:imgOK="onImageOK" />

js

var app = getApp();
Page({
   

    /**
     * 页面的初始数据
     */
    data: {
   
        isPosterShow: false,//海报弹框
        qrCodeUrl: "",//二维码图片路径
        posterData: {
   }