uni-canvas-image 1.0.6 → 1.0.8

package/package.json

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

package/src/common/index.js

@@ -50,15 +50,16 @@ export async function base64ToBlob(base64Data) {
 export async function drawImageToCanvas(arr, canvasId = 'canvas-1', api) {
   return new Promise((resolve, reject) => {
     const ctx = uni.createCanvasContext(canvasId)
-    context.setFillStyle('#fff')
-    context.fillRect(0, 0, 375, 300)
+    ctx.setFillStyle('#fff')
+    ctx.fillRect(0, 0, 375, 300)
     arr.forEach((item) => {
       if (item.type === 'image') {
         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' } = item
-        ctx.setFontSize(fontSize)
+        const { text, x = 10, y = 20, fontSize = 16, color = '#000', fontWeight = 'normal' } = item
+        ctx.font = `${fontWeight} ${fontSize}px sans-serif`
+        // ctx.setFontSize(fontSize)
         ctx.setFillStyle(color)
         ctx.setTextBaseline('top')
         ctx.fillText(text, x, y)

package/src/util/houseImage.js

@@ -1,14 +1,12 @@
 import { directionEnum, getImageInfo, drawImageToCanvas, handleParagraph } from '../common/index'
 const categoryEnum = [
-  { text: '单价', x: 10, y: 246, fontSize: 14, color: '#9B9B9B' },
-  { text: '（元/m²/天）', x: 34, y: 248, fontSize: 10, color: '#9B9B9B' },
-  { text: '面积', x: 160, y: 246, fontSize: 14, color: '#9B9B9B' },
-  { text: '（m²）', x: 184, y: 248, fontSize: 10, color: '#9B9B9B' },
-  { text: '朝向', x: 310, y: 246, fontSize: 14, color: '#9B9B9B' },
-  { text: '￥', x: 10, y: 276, fontSize: 10, color: '#FF703B' },
-  { name: '单价', key: 'rentDayCeilPrice', x: 20, y: 270, fontSize: 18, color: '#FF703B' },
-  { name: '面积', key: 'houseArea', x: 160, y: 270, fontSize: 18, color: '#FF703B' },
-  { name: '朝向', key: 'direction', x: 310, y: 270, fontSize: 18, color: '#FF703B' },
+  { text: '单价', x: 10, y: 246, fontSize: 18, color: '#9B9B9B' },
+  { text: '（/m²/天）', x: 36, y: 248, fontSize: 14, color: '#9B9B9B' },
+  { text: '面积', x: 150, y: 246, fontSize: 18, color: '#9B9B9B' },
+  { text: '朝向', x: 290, y: 246, fontSize: 18, color: '#9B9B9B' },
+  { name: '单价', key: 'rentDayCeilPrice', unit: '元', x: 10, y: 270, fontSize: 24, color: '#ca4e21' },
+  { name: '面积', key: 'houseArea', unit: 'm²', x: 150, y: 270, fontSize: 24, color: '#ca4e21' },
+  { name: '朝向', key: 'direction', x: 290, y: 270, fontSize: 24, color: '#ca4e21' },
 ]
 /**
  *
@@ -17,7 +15,7 @@ const categoryEnum = [
  */
 async function houseImage(params = {}) {
   const { data, canvasId, api } = params
-  if (!data) return reject('数据不能为空')
+  if (!data) return console.log('数据不能为空')
   const items = Array.isArray(data) ? data : [data]
   return items.length > 1
     ? await handleItems(items, canvasId, api) // 多个房源
@@ -34,18 +32,18 @@ async function handleItem(obj, canvasId, api) {
       dWidth: 375,
       dHeight: 170,
     }
-    const paragraphInfos = handleParagraph(obj.title)
+    const paragraphInfos = handleParagraph(obj.title, 21, 1)
     const titleInfos = paragraphInfos.map((text, index) => {
       return {
         type: 'text',
         text,
         x: 10,
         y: 180 + index * 20,
-        fontSize: 14,
+        fontSize: 18,
         color: '#000',
       }
     })
-    const tagsInfos = hanleTagsInfo(obj.tags, 14, titleInfos.length > 1 ? 224 : 216)
+    const tagsInfos = hanleTagsInfo(obj.tags.slice(0, 3), 14, 212)
     const categoryInfos = handleCategoryInfo(obj, categoryEnum)
     const newObj = [newImgInfo, ...titleInfos, ...tagsInfos, ...categoryInfos]
     const url = await drawImageToCanvas(newObj, canvasId, api)
@@ -56,7 +54,6 @@ function handleItems(arr, canvasId, api) {
   return new Promise(async (resolve, reject) => {
     const newObj = []
     const newArr = arr.slice(0, 2)
-    console.log('🚀 ~ handleItems ~ newArr:', newArr)
     for (let i = 0; i < newArr.length; i++) {
       const obj = newArr[i]
       // 图片
@@ -76,21 +73,19 @@ function handleItems(arr, canvasId, api) {
           text,
           x: 160,
           y: 10 + i * 152 + index * 20,
-          fontSize: 14,
+          fontSize: 16,
           color: '#000',
         }
       })
       // 标签
-      const tagsInfos = hanleTagsInfo(obj.tags, 160, (titleInfos.length > 1 ? 60 : 54) + i * 152)
+      const tagsInfos = hanleTagsInfo(obj.tags.slice(0, 2), 160, (titleInfos.length > 1 ? 60 : 54) + i * 152)
       // 分类信息
       const category = [
-        { text: '单价', x: 160, y: 90 + i * 152, fontSize: 14, color: '#9B9B9B' },
-        { text: '（元/m²/天）', x: 184, y: 92 + i * 152, fontSize: 10, color: '#9B9B9B' },
-        { text: '面积', x: 290, y: 90 + i * 152, fontSize: 14, color: '#9B9B9B' },
-        { text: '（m²）', x: 314, y: 92 + i * 152, fontSize: 10, color: '#9B9B9B' },
-        { text: '￥', x: 160, y: 124 + i * 152, fontSize: 10, color: '#FF703B' },
-        { name: '单价', key: 'rentDayCeilPrice', x: 170, y: 118 + i * 152, fontSize: 18, color: '#FF703B' },
-        { name: '面积', key: 'houseArea', x: 290, y: 118 + i * 152, fontSize: 18, color: '#FF703B' },
+        { text: '单价', x: 160, y: 90 + i * 152, fontSize: 18, color: '#9B9B9B' },
+        { text: '（/m²/天）', x: 188, y: 92 + i * 152, fontSize: 14, color: '#9B9B9B' },
+        { text: '面积', x: 290, y: 90 + i * 152, fontSize: 18, color: '#9B9B9B' },
+        { name: '单价', key: 'rentDayCeilPrice', unit: '元', x: 170, y: 118 + i * 152, fontSize: 24, color: '#FF703B' },
+        { name: '面积', key: 'houseArea', unit: 'm²', x: 290, y: 118 + i * 152, fontSize: 24, color: '#FF703B' },
       ]
       const categoryInfos = handleCategoryInfo(obj, category)
       newObj.push(newImgInfo, ...titleInfos, ...tagsInfos, ...categoryInfos)
@@ -107,10 +102,10 @@ function hanleTagsInfo(tags, x = 14, y = 224) {
       type: 'text',
       text: tag,
       // 前面标签的长度和间距计算x坐标
-      x: x + tags.slice(0, index).reduce((acc, cur) => acc + cur.length, 0) * 12 + index * 18, // 根据
+      x: x + tags.slice(0, index).reduce((acc, cur) => acc + cur.length, 0) * 16 + index * 18, // 根据
       y,
-      fontSize: 12,
-      color: '#377DF3',
+      fontSize: 16,
+      color: '#5d687a',
     }
   })
   //tga背景颜色
@@ -119,10 +114,10 @@ function hanleTagsInfo(tags, x = 14, y = 224) {
       type: 'rect',
       x: tag.x - 4,
       y: tag.y - 4,
-      width: tag.text.length * 12 + 8,
-      height: 20,
+      width: tag.text.length * 16 + 8,
+      height: 24,
       borderRadius: 4,
-      color: '#ebf1ff',
+      color: '#eceff7',
     }
   })
   return [...rects, ...tagsInfos]
@@ -135,6 +130,8 @@ function handleCategoryInfo(obj, categoryEnum) {
       if (item.key === 'direction') {
         item.text = directionEnum[obj?.direction[0]] + (obj?.direction.length > 1 ? '...' : '')
       } else item.text = obj[item.key] || ''
+      item.text += item.unit || ''
+      item.fontWeight = 'bold'
     }
     return item
   })

package/src/util/noteImage.js

@@ -6,7 +6,7 @@ import { getImageInfo, drawImageToCanvas, handleParagraph } from '../common/inde
  */
 async function noteImage(params = {}) {
   const { data, canvasId, api } = params
-  if (!data) return reject('数据不能为空')
+  if (!data) return console.log('数据不能为空')
   const items = Array.isArray(data) ? data : [data]
   return items.length > 1
     ? await handleItems(items, canvasId, api) // 多个房源