uni-canvas-image 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uni-canvas-image",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "租房项目使用uniapp canvas合并图片",
   "main": "src/index.js",
   "type": "module",

package/src/common/index.js

@@ -57,14 +57,13 @@ export async function drawImageToCanvas(arr, canvasId = 'canvas-1', api) {
         const { path, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight } = item
         ctx.drawImage(path, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
       } else if (item.type === 'text') {
-        const { text, x = 10, y = 20, fontSize = 16, color = '#000', fontWeight = 'normal' } = item
-        ctx.font = `${fontWeight} ${fontSize}px sans-serif`
-        // ctx.setFontSize(fontSize)
+        const { text, x = 10, y = 20, fontSize = 16, color = '#000', fontWeight = 'normal', fontFamily = 'Regular' } = item
         ctx.setFillStyle(color)
         ctx.setTextBaseline('top')
+        ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`
         ctx.fillText(text, x, y)
       } else if (item.type === 'rect') {
-        const { x, y, width, height, borderRadius, color } = item
+        const { x, y, width, height, borderRadius = 0, color } = item
         ctx.fillStyle = color // 填充
         roundedRectPath(ctx, x, y, width, height, borderRadius) // x, y, width, height, radius
         ctx.fill()
@@ -72,6 +71,12 @@ export async function drawImageToCanvas(arr, canvasId = 'canvas-1', api) {
         const { dx: x, dy: y, dWidth: width, dHeight: height, color } = item
         ctx.setFillStyle(color) // 填充
         ctx.fillRect(x, y, width, height) // x, y
+      } else if (item.type === 'rect3') {
+        const gradient = ctx.createLinearGradient(16, 280, 16, 240)
+        gradient.addColorStop(0, 'rgba(0, 0, 0, 0.7)')
+        gradient.addColorStop(1, 'rgba(0, 0, 0, 0.1)')
+        ctx.fillStyle = gradient
+        ctx.fillRect(16, 240, 210, 40)
       }
     })
     ctx.draw(false, () => {

package/src/index.js

@@ -1,3 +1,10 @@
+// 房源分享卡片
 export { default as houseImage } from './util/houseImage'
+// 笔记分享卡片
 export { default as noteImage } from './util/noteImage'
+// 多宫格分享卡片
 export { default as coverImage } from './util/coverImage'
+// 招商分享卡片
+export { default as attractImage } from './util/attractImage'
+// 导出通用方法
+export * from './common/index'

package/src/util/attractImage.js

@@ -0,0 +1,34 @@
+import { getImageInfo, drawImageToCanvas } from '../common/index'
+
+export async function attractImage(params) {
+  return new Promise(async (resolve, reject) => {
+    const { data, canvasId, api } = params
+    const staticInfo = [
+      { type: 'rect', x: 16, y: 34, width: 320, height: 16, color: '#00ffb7' },
+      { type: 'text', text: '主要区域：', x: 16, y: 29, color: '#000', fontSize: 16 },
+      { type: 'text', text: data.buildingCount, x: 340 - String(data.buildingCount).length * 24, y: 80, color: '#FF703B', fontSize: 40, fontWeight: 700 },
+      { type: 'text', text: '楼盘数量', x: 280, y: 130, color: '#000', fontSize: 16 },
+      { type: 'text', text: data.houseCount, x: 340 - String(data.houseCount).length * 24, y: 196, color: '#FF703B', fontSize: 40, fontWeight: 700 },
+      { type: 'text', text: '房源数量', x: 280, y: 246, color: '#000', fontSize: 16 },
+    ]
+    // 区域信息
+    const areaInfo = data.mainArea.length > 3 ? data.mainArea.slice(0, 3).join('、') + '...' : data.mainArea.join('、')
+    const newAreaInfo = { type: 'text', text: areaInfo, x: 92, y: 24, color: '#000', fontSize: 22, fontWeight: 600 }
+    // 图片信息
+    const imgInfo = await getImageInfo(data.buildingUrl, 230 / 210)
+    const newImgInfo = {
+      ...imgInfo,
+      dx: 16,
+      dy: 70,
+      dWidth: 230,
+      dHeight: 210,
+    }
+    const maskInfo = { type: 'rect3' }
+    const buildingLabel = { type: 'text', text: '主营楼盘：', x: 22, y: 260, color: '#fff', fontSize: 12 }
+    data.mainBuilding = data.mainBuilding.join('、').length > 11 ? data.mainBuilding.join('、').slice(0, 11) + '...' : data.mainBuilding.join('、')
+    const newBuildingInfo = { type: 'text', text: data.mainBuilding, x: 80, y: 258, color: '#fff', fontSize: 14 }
+    const newObj = [...staticInfo, newAreaInfo, newImgInfo, maskInfo, buildingLabel, newBuildingInfo]
+    const url = await drawImageToCanvas(newObj, canvasId, api)
+    resolve(url)
+  })
+}