readme.md 37.9 KB

原文件审查历史永久链接



Painter 画板 测试版


uniapp 海报画板，更优雅的海报生成方案

查看更多 站点 1

查看更多 站点 2

Q 群：1169785031


平台兼容


H5
微信小程序
支付宝小程序
百度小程序
头条小程序
QQ 小程序
App


√
√
√
未测
√
√
√


安装

在市场导入海报画板uni_modules版本的即可，无需import


代码演示


插件demo


lime-painter 为 demo
位于 uni_modules/lime-painter/components/lime-painter
导入插件后直接使用可查看demo
vue
<lime-painter />


基本用法


插件提供 JSON 及 Template 的方式绘制海报
参考 css 块状流布局模拟 css schema。
另外flex布局还不是成完善，请谨慎使用，普通的流布局我觉得已经够用了。


方式一 Template


提供l-painter-view、l-painter-text、l-painter-image、l-painter-qrcode四种类型组件
通过 css 属性绘制样式，与 style 使用方式保持一致。
html
<l-painter>
//如果使用Template出现顺序错乱，可使用`template` 等所有变量完成再显示
<template v-if="show">
    <l-painter-view
        css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block"
    ></l-painter-view>
    <l-painter-view
        css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;"
    ></l-painter-view>
    <l-painter-view
        css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block"
    ></l-painter-view>
<template>
</l-painter>


方式二 JSON


在 json 里四种类型组件的type为view、text、image、qrcode

通过 board 设置海报所需的 JSON 数据进行绘制或ref获取组件实例调用组件内的render(json)

所有类型的 schema 都具有css字段，css 的 key 值使用驼峰如：lineHeight


<l-painter :board="poster"/>


data() {
    return {
        poster: {
            css: {
                // 根节点若无尺寸，自动获取父级节点
                width: '750rpx'
            },
            views: [
                {
                    css: {
                        background: "#07c160",
                        height: "120rpx",
                        width: "120rpx",
                        display: "inline-block"
                    },
                    type: "view"
                },
                {
                    css: {
                        background: "#1989fa",
                        height: "120rpx",
                        width: "120rpx",
                        borderTopRightRadius: "60rpx",
                        borderBottomLeftRadius: "60rpx",
                        display: "inline-block",
                        margin: "0 30rpx"
                    },
                    views: [],
                    type: "view"
                },
                {
                    css: {
                        background: "#ff9d00",
                        height: "120rpx",
                        width: "120rpx",
                        borderRadius: "50%",
                        display: "inline-block"
                    },
                    views: [],
                    type: "view"
                },
            ]
        }
    }
}


View 容器


类似于 div 可以嵌套承载更多的 view、text、image，qrcode 共同构建一颗完整的节点树
在 JSON 里具有 views 的数组字段，用于嵌套承载节点。


方式一 Template

<l-painter>
  <l-painter-view css="background: #f0f0f0; padding-top: 100rpx;">
    <l-painter-view
      css="background: #d9d9d9; width: 33.33%; height: 100rpx; display: inline-block"
    ></l-painter-view>
    <l-painter-view
      css="background: #bfbfbf; width: 66.66%; height: 100rpx; display: inline-block"
    ></l-painter-view>
  </l-painter-view>
</l-painter>


方式二 JSON

{
    css: {},
    views: [
        {
            type: 'view',
            css: {
                background: '#f0f0f0',
                paddingTop: '100rpx'
            },
            views: [
                {
                    type: 'view',
                    css: {
                        background: '#d9d9d9',
                        width: '33.33%',
                        height: '100rpx',
                        display: 'inline-block'
                    }
                },
                {
                    type: 'view',
                    css: {
                        background: '#bfbfbf',
                        width: '66.66%',
                        height: '100rpx',
                        display: 'inline-block'
                    }
                }
            ],

        }
    ]
}


Text 文本


通过 text 属性填写文本内容。
支持\n换行符
支持省略号，使用 css 的line-clamp设置行数，当文字内容超过会显示省略号。
支持text-decoration


方式一 Template

<l-painter>
  <l-painter-view css="background: #e0e2db; padding: 30rpx; color: #222a29">
    <l-painter-text
      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
    />
    <l-painter-text
      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
      css="text-align:center; padding-top: 20rpx; text-decoration: line-through "
    />
    <l-painter-text
      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
      css="text-align:right; padding-top: 20rpx"
    />
    <l-painter-text
      text="水调歌头\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。"
      css="line-clamp: 3; padding-top: 20rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%); background-clip: text"
    />
  </l-painter-view>
</l-painter>


方式二 JSON

// 基础用法
{
    type: 'text',
    text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
},
{
    type: 'text',
    text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
    css: {
        // 设置居中对齐
        textAlign: 'center',
        // 设置中划线
        textDecoration: 'line-through'
    }
},
{
    type: 'text',
    text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
    css: {
        // 设置右对齐
        textAlign: 'right',
    }
},
{
    type: 'text',
    text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
    css: {
        // 设置行数，超出显示省略号
        lineClamp: 3,
        // 渐变文字
        background: 'linear-gradient(,#ff971b 0%, #1989fa 100%)',
        backgroundClip: 'text'
    }
}


Image 图片


通过 src 属性填写图片路径。
图片路径支持：网络图片，本地 static 里的图片路径，缓存路径，字节的static目录是写相对路径

通过 css 的 object-fit属性可以设置图片的填充方式，可选值见下方 CSS 表格。
通过 css 的 object-position配合 object-fit 可以设置图片的对齐方式，类似于background-position，详情见下方 CSS 表格。
使用网络图片时：小程序需要去公众平台配置 downloadFile 域名
使用网络图片时：H5 和 Nvue 需要决跨域问题


方式一 Template

<l-painter>
  <!-- 基础用法 -->
  <l-painter-image
    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
    css="width: 200rpx; height: 200rpx"
  />
  <!-- 填充方式 -->
  <!-- css object-fit 设置 填充方式 见下方表格-->
  <l-painter-image
    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
    css="width: 200rpx; height: 200rpx; object-fit: contain; background: #eee"
  />
  <!-- css object-position 设置 图片的对齐方式-->
  <l-painter-image
    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
    css="width: 200rpx; height: 200rpx; object-fit: contain; object-position: 50% 50%; background: #eee"
  />
</l-painter>


方式二 JSON

// 基础用法
{
    type: 'image',
    src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
    css: {
        width: '200rpx',
        height: '200rpx'
    }
},
// 填充方式
// css objectFit 设置 填充方式 见下方表格
{
    type: 'image',
    src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
    css: {
        width: '200rpx',
        height: '200rpx',
        objectFit: 'contain'
    }
},
// css objectPosition 设置 图片的对齐方式
{
    type: 'image',
    src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
    css: {
        width: '200rpx',
        height: '200rpx',
        objectFit: 'contain',
        objectPosition: '50% 50%'
    }
}


Qrcode 二维码


通过text属性填写需要生成二维码的文本。
通过 css 里的 color 可设置生成码点的颜色。
通过 css 里的 background可设置背景色。
通过 css里的 width、height设置尺寸。


方式一 Template

<l-painter>
  <l-painter-qrcode
    text="limeui.qcoon.cn"
    css="width: 200rpx; height: 200rpx"
  />
</l-painter>


方式二 JSON

{
    type: 'qrcode',
    text: 'limeui.qcoon.cn',
    css: {
        width: '200rpx',
        height: '200rpx',
    }
}


生成图片


方式1、通过设置isCanvasToTempFilePath自动生成图片并在 @success 事件里接收海报临时路径
方式2、通过调用内部方法生成图片：


<l-painter ref="painter">...code</l-painter>


this.$refs.painter.canvasToTempFilePathSync({
  fileType: "jpg",
  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
  pathType: 'url',
  quality: 1,
  success: (res) => {
    console.log(res.tempFilePath);
    // 非H5 保存到相册
    // H5 提示用户长按图另存
    uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function () {
            console.log('save success');
        }
    });
  },
});


主动调用方式


通过获取组件实例内部的render函数 传递JSON即可


<l-painter ref="painter" />


// 渲染
this.$refs.painter.render(jsonSchema);
// 生成图片
this.$refs.painter.canvasToTempFilePathSync({
  fileType: "jpg",
  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
  pathType: 'url',
  quality: 1,
  success: (res) => {
    console.log(res.tempFilePath);
    // 非H5 保存到相册
    uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function () {
            console.log('save success');
        }
    });
  },
});


H5跨域


一般是需要后端或管理OSS资源的大佬处理
一般OSS的处理方式:


1、设置来源

*


2、允许Methods

GET


3、允许Headers

access-control-allow-origin:*


4、最后如果还是不行,可试下给插件设置useCORS

<l-painter useCORS>


海报示例


提供一份示例，只把插件当成生成图片的工具，非必要不要在弹窗里使用。
通过设置isCanvasToTempFilePath主动生成图片，再由 @success 事件接收海报临时路径
设置hidden隐藏画板。
请注意，示例用到了图片，海报的渲染是包括下载图片的时间，也许在某天图片会失效或访问超级慢，请更换为你的图片再查看，另外如果你是小程序请在使用示例时把不校验合法域名勾上！！！！！不然不显示还以为是插件的锅，求求了大佬们！
#### 方式一 Template


<image :src="path" mode="widthFix"></image>
<l-painter
  isCanvasToTempFilePath
  @success="path = $event"
  hidden
  css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)"
>
  <l-painter-image
    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
    css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;"
  />
  <l-painter-view
    css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block"
  >
    <l-painter-text
      text="隔壁老王"
      css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold"
    />
    <l-painter-text
      text="为您挑选了一个好物"
      css="color: rgba(255,255,255,.7); font-size: 24rpx"
    />
  </l-painter-view>
  <l-painter-view
    css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)"
  >
    <l-painter-image
      src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
      css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;"
    />
    <l-painter-view
      css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;"
    >
      <l-painter-text text="￥" css="vertical-align: bottom" />
      <l-painter-text
        text="39"
        css="vertical-align: bottom; font-size: 58rpx"
      />
      <l-painter-text text=".39" css="vertical-align: bottom" />
      <l-painter-text
        text="￥59.99"
        css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999"
      />
    </l-painter-view>
    <l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
      <l-painter-text text="自营" css="color: #212121; background: #ffb400;" />
      <l-painter-text
        text="30天最低价"
        css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;"
      />
      <l-painter-text
        text="满减优惠"
        css="margin-left: 16rpx; background: #fff4d9"
      />
      <l-painter-text
        text="超高好评"
        css="margin-left: 16rpx; background: #fff4d9"
      />
    </l-painter-view>
    <l-painter-view css="margin-top: 30rpx">
      <l-painter-text
        css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
        text="360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝"
      ></l-painter-text>
      <l-painter-qrcode
        css="width: 128rpx; height: 128rpx;"
        text="limeui.qcoon.cn"
      ></l-painter-qrcode>
    </l-painter-view>
  </l-painter-view>
</l-painter>


data() {
    return {
        path: ''
    }
}


方式二 JSON

<image :src="path" mode="widthFix"></image>
<l-painter
  :board="poster"
  isCanvasToTempFilePath
  @success="path = $event"
  hidden
/>


data() {
    return {
        path: '',
        poster: {
            css: {
                width: "750rpx",
                paddingBottom: "40rpx",
                background: "linear-gradient(,#000 0%, #ff5000 100%)"
            },
            views: [
                {
                    src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
                    type: "image",
                    css: {
                        background: "#fff",
                        objectFit: "cover",
                        marginLeft: "40rpx",
                        marginTop: "40rpx",
                        width: "84rpx",
                        border: "2rpx solid #fff",
                        boxSizing: "border-box",
                        height: "84rpx",
                        borderRadius: "50%"
                    }
                },
                {
                    type: "view",
                    css: {
                        marginTop: "40rpx",
                        paddingLeft: "20rpx",
                        display: "inline-block"
                    },
                    views: [
                        {
                            text: "隔壁老王",
                            type: "text",
                            css: {
                                display: "block",
                                paddingBottom: "10rpx",
                                color: "#fff",
                                fontSize: "32rpx",
                                fontWeight: "bold"
                            }
                        },
                        {
                            text: "为您挑选了一个好物",
                            type: "text",
                            css: {
                                color: "rgba(255,255,255,.7)",
                                fontSize: "24rpx"
                            },
                        }
                    ],
                },
                {
                    css: {
                        marginLeft: "40rpx",
                        marginTop: "30rpx",
                        padding: "32rpx",
                        boxSizing: "border-box",
                        background: "#fff",
                        borderRadius: "16rpx",
                        width: "670rpx",
                        boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
                    },
                    views: [
                        {
                            src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
                            type: "image",
                            css: {
                                objectFit: "cover",
                                objectPosition: "50% 50%",
                                width: "606rpx",
                                height: "606rpx"
                            },
                        }, {
                            css: {
                                marginTop: "32rpx",
                                color: "#FF0000",
                                fontWeight: "bold",
                                fontSize: "28rpx",
                                lineHeight: "1em"
                            },
                            views: [{
                                text: "￥",
                                type: "text",
                                css: {
                                    verticalAlign: "bottom"
                                },
                            }, {
                                text: "39",
                                type: "text",
                                css: {
                                    verticalAlign: "bottom",
                                    fontSize: "58rpx"
                                },
                            }, {
                                text: ".39",
                                type: "text",
                                css: {
                                    verticalAlign: "bottom"
                                },
                            }, {
                                text: "￥59.99",
                                type: "text",
                                css: {
                                    verticalAlign: "bottom",
                                    paddingLeft: "10rpx",
                                    fontWeight: "normal",
                                    textDecoration: "line-through",
                                    color: "#999999"
                                }
                            }],

                            type: "view"
                        }, {
                            css: {
                                marginTop: "32rpx",
                                fontSize: "26rpx",
                                color: "#8c5400"
                            },
                            views: [{
                                text: "自营",
                                type: "text",
                                css: {
                                    color: "#212121",
                                    background: "#ffb400"
                                },
                            }, {
                                text: "30天最低价",
                                type: "text",
                                css: {
                                    marginLeft: "16rpx",
                                    background: "#fff4d9",
                                    textDecoration: "line-through"
                                },
                            }, {
                                text: "满减优惠",
                                type: "text",
                                css: {
                                    marginLeft: "16rpx",
                                    background: "#fff4d9"
                                },
                            }, {
                                text: "超高好评",
                                type: "text",
                                css: {
                                    marginLeft: "16rpx",
                                    background: "#fff4d9"
                                },

                            }],

                            type: "view"
                        }, {
                            css: {
                                marginTop: "30rpx"
                            },
                            views: [
                                {
                                    text: "360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝",
                                    type: "text",
                                    css: {
                                        paddingRight: "32rpx",
                                        boxSizing: "border-box",
                                        lineClamp: 2,
                                        color: "#333333",
                                        lineHeight: "1.8em",
                                        fontSize: "36rpx",
                                        width: "478rpx"
                                },
                            }, {
                                text: "limeui.qcoon.cn",
                                type: "qrcode",
                                css: {
                                    width: "128rpx",
                                    height: "128rpx",
                                },

                            }],
                            type: "view"
                        }],
                    type: "view"
                }
            ]
        }
    }
}


Nvue


必须为HBX 3.4.11及以上


原生小程序


插件里的painter.js支持在原生小程序中使用
new Painter 之后在source里传入 JSON
再调用render绘制海报
如需生成图片，请查看微信小程序 cavnas 的canvasToTempFilePath


<canvas type="2d" id="painter" style="width: 100%"></canvas>


import { Painter } from "./painter";
page({
  data: {
    poster: {
      css: {
        width: "750rpx",
      },
      views: [
        {
          type: "view",
          css: {
            background: "#d2d4c8",
            paddingTop: "100rpx",
          },
          views: [
            {
              type: "view",
              css: {
                background: "#5f7470",
                width: "33.33%",
                height: "100rpx",
                display: "inline-block",
              },
            },
            {
              type: "view",
              css: {
                background: "#889696",
                width: "33.33%",
                height: "100rpx",
                display: "inline-block",
              },
            },
            {
              type: "view",
              css: {
                background: "#b8bdb5",
                width: "33.33%",
                height: "100rpx",
                display: "inline-block",
              },
            },
          ],
        },
      ],
    },
  },
  async onLoad() {
    const res = await this.getCentext();
    const painter = new Painter(res);
    // 返回计算布局后的整个内容尺寸
    const { width, height } = await painter.source(this.data.poster);
    // 得到计算后的尺寸后 可给canvas尺寸赋值，达到动态响应效果
    // 渲染
    await painter.render();
  },
  // 获取canvas 2d
  // 非2d 需要传一个 createImage 方法用于获取图片信息 即把 getImageInfo 的 success 通过 promise resolve 返回
  getCentext() {
    return new Promise((resolve) => {
      my.createSelectorQuery()
        .select(`#painter`)
        .node()
        .exec((res) => {
          let { node: canvas } = res[0];
          resolve({
            canvas,
            context: canvas.getContext("2d"),
            width: canvas.width,
            height: canvas.height,
            // createImage: getImageInfo()
            pixelRatio: 2,
          });
        });
    });
  },
});


旧版(1.6.x)更新


由于 1.8.x 版放弃了以定位的方式，所以 1.6.x 版更新之后要每个样式都加上position: absolute

旧版的 image mode 模式被放弃，使用object-fit

旧版的 isRenderImage 改成 is-canvas-to-temp-file-path

旧版的 maxLines 改成 line-clamp


API


Props


参数
说明
类型
默认值


board
JSON 方式的海报元素对象集
object
-


css
海报内容最外层的样式，可以理解为body

object
参数请向下看


custom-style
canvas 元素的样式
string


hidden
隐藏画板
boolean
false


is-canvas-to-temp-file-path
是否生成图片，在@success事件接收图片地址
boolean
false


after-delay
生成图片错乱，可延时生成图片
number
100


type
canvas 类型，对微信头条支付宝小程序可有效,可选值：2d，''

string
2d


file-type
生成图片的后缀类型, 可选值：png、jpg

string
png


path-type
生成图片路径类型，可选值url、base64

string
-


pixel-ratio
生成图片的像素密度，默认为对应手机的像素密度，nvue无效
number
-


width

废弃 画板的宽度，一般只用于通过内部方法时加上
number
``


height

废弃 画板的高度 ，同上
number
``


css


属性名
支持的值或类型
默认值


(min\max)width
支持%、rpx、px

-


height
同上
-


color
string
-


position
定位，可选值：absolute、fixed

-


↳ left、top、right、bottom
配合position才生效，支持%、rpx、px

-


margin
可简写或各方向分别写，如：margin-top，支持auto、rpx、px

-


padding
可简写或各方向分别写，支持rpx、px

-


border
可简写或各个值分开写：border-width、border-style 、border-color，简写请按顺序写
-


line-clamp

number，超过行数显示省略号
-


vertical-align
文字垂直对齐，可选值：bottom、top、middle

middle


line-height
文字行高，支持rpx、px、em

1.4em


font-weight
文字粗细，可选值：normal、bold

normal


font-size
文字大小，string，支持rpx、px

14px


text-decoration
文本修饰，可选值：underline 、line-through、overline

-


text-stroke
文字描边，可简写或各个值分开写，如：text-stroke-color, text-stroke-width

-


text-align
文本水平对齐，可选值：right 、center

left


display
框类型，可选值：block、inline-block、flex、none，当为none时是不渲染该段, flex功能简陋。
-


flex
配合 display: flex; 属性定义了在分配多余空间,目前只用为数值如： flex: 1
-


align-self
配合 display: flex; 单个项目垂直轴对齐方式: flex-start flex-end center

flex-start


justify-content
配合 display: flex; 水平轴对齐方式: flex-start flex-end center

flex-start


align-items
配合 display: flex; 垂直轴对齐方式: flex-start flex-end center

flex-start


border-radius
圆角边框，支持%、rpx、px

-


box-sizing
可选值：border-box

-


box-shadow
投影
-


background(color)
支持渐变，但必须写百分比！如:linear-gradient(,#ff971b 0%, #ff5000 100%)、radial-gradient(#0ff 15%, #f0f 60%),目前 radial-gradient 渐变的圆心为元素中点，半径为最长边，不支持设置
-


background-clip
文字渐变，配合background背景渐变，设置background-clip: text 达到文字渐变效果
-


background-image
view 元素背景：url(src),若只是设置背景图，请不要设置background-repeat

-


background-repeat
设置是否及如何重复背景纹理，可选值：repeat、repeat-x、repeat-y、no-repeat

repeat


object-fit
图片元素适应容器方式,类似于mode,可选值：cover、 contain、 fill、 none

-


object-position
图片的对齐方式，配合object-fit使用
-


图片填充模式 object-fit


名称
含义


contain
保持宽高缩放图片，使图片的长边能完全显示出来


cover
保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边


fill
拉伸图片，使图片填满元素


none
保持图片原有尺寸


事件 Events


事件名
说明
返回值


success
生成图片成功,若使用is-canvas-to-temp-filePath 可以接收图片地址
path


fail
生成图片失败
error


done
绘制成功


progress
绘制进度
number


暴露函数 Expose


事件名
说明
返回值


render(object)
渲染器，传入JSON 绘制海报
promise


canvasToTempFilePath(object)
把当前画布指定区域的内容导出生成指定大小的图片，并返回文件临时路径。


canvasToTempFilePathSync(object)
同步接口，同上


常见问题


1、H5 端使用网络图片需要解决跨域问题。
2、小程序使用网络图片需要去公众平台增加下载白名单！二级域名也需要配！
3、H5 端生成图片是 base64，有时显示只有一半可以使用原生标签<IMG/>

4、发生保存图片倾斜变形或提示 native buffer exceed size limit 时，使用 pixel-ratio="2"参数，降分辨率。
5、h5 保存图片不需要调接口，提示用户长按图片保存。
6、画板不能隐藏，包括v-if，v-show、display:none、opacity:0，另外也不要把画板放在弹窗里。如果需要隐藏画板请设置 custom-style="position: fixed; left: 200%"

7、微信小程序真机调试请使用 真机调试2.0，不支持1.0。
8、微信小程序打开调试时可以生但并闭无法生成时，这种情况一般是没有在公众号配置download域名
9、HBX 3.4.5之前的版本不支持vue3
10、在微信开发工具上 canvas 层级最高无法zindex，并不影响真机
11、请不要导入非uni_modules插件
12、关于QQ小程序 报 Propertyor method"toJSON"is not defined 请把基础库调到 1.50.3
13、支付宝小程序 IDE 不支持 生成图片 请以真机调试结果为准
14、返回值为字符串 data:, 大概是尺寸超过限制，设置 pixel-ratio="2"
华为手机 APP 上无法生成图片，请使用 HBX2.9.11++（已过时，忽略这条）
IOS APP 请勿使用 HBX2.9.3.20201014 的版本！这个版本无法生成图片。（已过时，忽略这条）
苹果微信 7.0.20 存在闪退和图片无法 onload 为微信 bug（已过时，忽略这条）
微信小程序 IOS 旧接口 如父级设置圆角，子级也设会导致子级的失效，为旧接口BUG。
微信小程序 安卓 旧接口 如使用图片必须加背景色，为旧接口BUG。


打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。