更新记录

1.9.3.5(2022-06-29)

  • feat: justifyContent 增加 space-aroundspace-between
  • feat: canvas 2d 也使用getImageInfo
  • fix: 修复 texttext-decoration错位

1.9.3.4(2022-06-20)

  • fix: 修复 因创建节点速度问题导致顺序出错。
  • fix: 修复 微信小程序 PC 无法显示本地图片
  • fix: 修复 flex-box 对齐问题
  • feat: 增加 text-shadow
  • feat: 重写 text 对齐方式
  • chore: 更新文档
查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.4.14 app-vue app-nvue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × ×

Painter 画板 测试版

uniapp 海报画板,更优雅的海报生成方案
查看更多 站点 1
查看更多 站点 2
Q 群:806744170

平台兼容

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

安装

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

代码演示

基本用法

  • 插件提供 JSON 及 XML 的方式绘制海报
  • 参考 css 块状流布局模拟 css schema。

方式一 XML

  • 提供l-painter-viewl-painter-textl-painter-imagel-painter-qrcode四种类型组件
  • 通过 css 属性绘制样式,与 style 使用方式保持一致。
    <l-painter>
    //如果使用XML出现顺序错乱,可使用`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 里四种类型组件的typeviewtextimageqrcode
  • 通过 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 的数组字段,用于嵌套承载节点。

方式一 XML

<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

方式一 XML

<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 里的图片路径,缓存路径
  • 通过 cssobject-fit属性可以设置图片的填充方式,可选值见下方 CSS 表格。
  • 通过 cssobject-position配合 object-fit 可以设置图片的对齐方式,类似于background-position,详情见下方 CSS 表格。
  • 使用网络图片时:小程序需要去公众平台配置 downloadFile 域名
  • 使用网络图片时:H5 和 Nvue 需要决跨域问题

方式一 XML

<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里的 widthheight设置尺寸。

方式一 XML

<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 事件接收海报临时路径
  • 设置custom-style="position: fixed; left: 200%"样式把画板移到屏幕之外,达到隐藏画板的效果。
  • 注意:受平台影响海报画板最好不要隐藏,可能会无法生成图片。

方式一 XML

<image :src="path" mode="widthFix"></image>
<l-painter
  isCanvasToTempFilePath
  @success="path = $event"
  custom-style="position: fixed; left: 200%"
  css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)"
>
  <l-painter-image
    src="https://cdn.jsdelivr.net/gh/liangei/image@latest/avatar-1.jpeg"
    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"
  custom-style="position: fixed; left: 200%"
/>
data() {
    return {
        path: '',
        poster: {
            css: {
                width: "750rpx",
                paddingBottom: "40rpx",
                background: "linear-gradient(,#000 0%, #ff5000 100%)"
            },
            views: [
                {
                    src: "https://fastly.jsdelivr.net/gh/liangei/image@latest/avatar-1.jpeg",
                    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也可以使用这里只是举个例子
  getCentext() {
    return new Promise((resolve) => {
      wx.createSelectorQuery()
        .select(`#painter`)
        .node()
        .exec((res) => {
          let { node: canvas } = res[0];
          resolve({
            canvas,
            context: canvas.getContext("2d"),
            width: canvas.width,
            height: canvas.height,
            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
is-canvas-to-temp-file-path 是否生成图片,在@success事件接收图片地址 boolean false
after-delay 生成图片错乱,可延时生成图片 number 100
type canvas 类型,对微信头条支付宝小程序可有效,可选值:2d'' string 2d
file-type 生成图片的后缀类型, 可选值:pngjpg string png
path-type 生成图片路径类型,可选值urlbase64 string -
pixel-ratio 生成图片的像素密度,默认为对应手机的像素密度,nvue无效 number -
width 废弃 画板的宽度,一般只用于通过内部方法时加上 number ``
height 废弃 画板的高度 ,同上 number ``

css

属性名 支持的值或类型 默认值
(min\max)width 支持%rpxpx -
height 同上 -
color string -
position 定位,可选值:absolutefixed -
↳ left、top、right、bottom 配合position才生效,支持%rpxpx -
margin 可简写或各方向分别写,如:margin-top,支持autorpxpx -
padding 可简写或各方向分别写,支持rpxpx -
border 可简写或各个值分开写:border-widthborder-styleborder-color,简写请按顺序写 -
line-clamp number,超过行数显示省略号 -
vertical-align 文字垂直对齐,可选值:bottomtopmiddle middle
line-height 文字行高,支持rpxpxem 1.4em
font-weight 文字粗细,可选值:normalbold normal
font-size 文字大小,string,支持rpxpx 14px
text-decoration 文本修饰,可选值:underlineline-throughoverline -
text-align 文本水平对齐,可选值:rightcenter left
display 框类型,可选值:blockinline-blockflexnone,当为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 圆角边框,支持%rpxpx -
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 设置是否及如何重复背景纹理,可选值:repeatrepeat-xrepeat-yno-repeat repeat
object-fit 图片元素适应容器方式,类似于mode,可选值:covercontainfillnone -
object-position 图片的对齐方式,配合object-fit使用 -

图片填充模式 object-fit

名称 含义
contain 保持宽高缩放图片,使图片的长边能完全显示出来
cover 保持宽高缩放图片,使图片的短边能完全显示出来,裁剪长边
fill 拉伸图片,使图片填满元素
none 保持图片原有尺寸

事件 Events

事件名 说明 返回值
success 生成图片成功,若使用is-canvas-to-temp-filePath 可以接收图片地址 path
fail 生成图片失败 error
done 绘制成功
progress 绘制进度 number

内部函数 Ref

事件名 说明 返回值
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-ifv-showdisplay:noneopacity:0,另外也不要把画板放在弹窗里。如果需要隐藏画板请设置 custom-style="position: fixed; left: 200%"
  • 7、微信小程序 canvas 2d 不支持真机调试,请使用真机预览方式。
  • 8、微信小程序打开调试时可以生但并闭无法生成时,这种情况一般是没有在公众号配置download域名
  • 9、HBX 3.4.5之前的版本不支持vue3
  • 10、在微信开发工具上 canvas 层级最高无法zindex,并不影响真机
  • 11、请不要导入非uni_modules插件
  • 华为手机 APP 上无法生成图片,请使用 HBX2.9.11++(已过时,忽略这条)
  • IOS APP 请勿使用 HBX2.9.3.20201014 的版本!这个版本无法生成图片。(已过时,忽略这条)
  • 苹果微信 7.0.20 存在闪退和图片无法 onload 为微信 bug(已过时,忽略这条)

打赏

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

输入图片说明 输入图片说明

隐私、权限声明

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

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

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

许可协议

MIT协议

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