前言

uniapp绘制朋友圈海报分享图片

实现

  1. <canvas class="my-canvas" canvas-id="shareCanvas"></canvas>
  1. import Painter from "mp-painter";
  3. let painter = new Painter(uni.createCanvasContext('shareCanvas', this));
  5. return new Promise((resolve,reject) => {
  6.     painter.draw({
  7.       type: "container",
  8.     top: 0,
  9.     left: 0,
  10.     children: [
  11.       {type: "rect", top: 0, width: 610, height: 970, background: "#fff"}
  12.     ]
  13.   }).then(() => {
  14.       Promise.all([
  15.         painter.draw({
  16.         type: "container",
  17.         top: 40,
  18.         left: 210,
  19.         children: [
  20.           {type: "image", top: 0, left: 0, width: 40, height: 40, src: "http://cdn.zsdx.cn/student-app/images/hand-logo.png"},
  21.         ]
  22.       }),
  23.       painter.draw({}),
  24.       ...
  25.     ]).then(resp => {
  26.       //把指定画布内容倒醋和指定大小的图片
  27.         uni.canvasToTempFilePath( {
  28.                     canvasId: 'shareCanvas',
  29.                     quality: 0.01,
  30.                     success: res => {
  31.                         console.log('tempFilePath', resp.tempFilePath);
  32.                     },
  33.                     fail: error => {
  34.                         reject(error);
  35.                     }
  36.                 },this);
  37.     })
  38.   })
  39. })

API

注: 位置和宽高根据实际情况填写.

  1. //绘制图片
  2. painter.draw({
  3.   type: "container",
  4.   top: x,
  5.   left: y,
  6.   children: [
  7.     {type: "image", top: 0, left: 0, width: 40, height: 40, src: "http://cdn.zsdx.cn/student-app/images/hand-logo.png"},
  8.   ]
  9. })
  11. //绘制文本
  12. painter.draw({
  13.   type: "container",
  14.   top: x,
  15.   left: y,
  16.   children: [
  17.     { type: "text", top: 0, left: 0,fontSize: 30,baseline: "middle", content: "掌上大学" }
  18.   ]
  19. })
  21. //绘制矩形
  22. painter.draw({
  23.   type: "container",
  24.   top: x,
  25.   left: y,
  26.   children: [
  27.     {type: "rect", top: 0, left:0, width: 530, height: 530, background: '#FF2A2A'}
  28.   ]
  29. })
  31. //矩形圆角渐变色
  32. painter.draw({
  33.   type: "container",
  34.   top: x,
  35.   left: y,
  36.   children: [
  37.     {type: "rect", top: 449, left: margin_price_1-104 - 70, width: 530 - (margin_price_1-104-70), height: 80, background: {
  38.       type: "liner-gradient",
  39.       x1: 0, y1: 0, x2: 280, y2: 80,
  40.       colorStops: [
  41.         { offset: 0, color: "#FF4978" },
  42.         { offset: 1, color: "#FF2A2A" }
  43.       ]
  44.     }, borderRadius: [200, 0, 0, 0], position: "absolute"}
  45.   ]
  46. })
  48. //多行文本
  49. painter.draw({
  50.   type: "container",
  51.   top: 670,
  52.   left: 40,
  53.   children: [
  54.     {
  55.       type: "text-block",
  56.       top: 0,
  57.       left: 0,
  58.       width: 346,
  59.       lineClamp: 2,
  60.       fontSize: 28,
  61.       color: '#1D2023',
  62.       content: '多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本',
  63.     }
  64.   ]
  65. })

参考

https://github.com/xlfsummer/mp-painter

相关

https://github.com/quanweiwang/uniapp-canvas-drawer