uni-canvas-image 1.1.2 → 1.1.4

package/package.json

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

package/src/common/index.js

@@ -2,7 +2,6 @@ export const directionEnum = { NORTH: '北', EAST: '东', SOUTH: '南', WEST: '
 
 export async function getImageInfo(src, targetRatio) {
   return new Promise(async (resolve, reject) => {
-    if (src && src.endsWith('.mp4')) src = src.replace('.mp4', '.png')
     if (src) {
       const imageInfo = await uni.getImageInfo({ src })
       const newImageInfo = {
@@ -47,10 +46,11 @@ export async function base64ToBlob(base64Data) {
   return await response.blob()
 }
 
-export async function drawImageToCanvas(arr, canvasId = 'canvas-1', api) {
+export async function drawImageToCanvas(arr, canvasId = 'canvas-1', api, config) {
   return new Promise((resolve, reject) => {
+    const { bgc = '#fff' } = config || {}
     const ctx = uni.createCanvasContext(canvasId)
-    ctx.setFillStyle('#fff')
+    ctx.setFillStyle(bgc)
     ctx.fillRect(0, 0, 375, 300)
     arr.forEach((item) => {
       if (item.type === 'image') {

package/src/util/attractImage.js

@@ -10,15 +10,15 @@ async function attractImage(params) {
     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 },
+      { type: 'text', text: '主要区域：', x: 16, y: 29, color: '#000', fontSize: 18 },
+      { type: 'text', text: data.buildingCount, x: 346 - String(data.buildingCount).length * 24, y: 80, color: '#FF703B', fontSize: 46, fontWeight: 700 },
+      { type: 'text', text: '楼盘数量', x: 280, y: 132, color: '#000', fontSize: 20 },
+      { type: 'text', text: data.houseCount, x: 346 - String(data.houseCount).length * 24, y: 196, color: '#FF703B', fontSize: 46, fontWeight: 700 },
+      { type: 'text', text: '房源数量', x: 280, y: 248, color: '#000', fontSize: 20 },
     ]
     // 区域信息
     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 newAreaInfo = { type: 'text', text: areaInfo, x: 100, y: 24, color: '#000', fontSize: 24, fontWeight: 600 }
     // 图片信息
     const imgInfo = await getImageInfo(data.buildingUrl, 230 / 210)
     const newImgInfo = {
@@ -29,11 +29,11 @@ async function attractImage(params) {
       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 buildingLabel = { type: 'text', text: '主营楼盘：', x: 22, y: 260, color: '#fff', fontSize: 14 }
+    data.mainBuilding = data.mainBuilding.join('、').length > 8 ? data.mainBuilding.join('、').slice(0, 8) + '...' : data.mainBuilding.join('、')
+    const newBuildingInfo = { type: 'text', text: data.mainBuilding, x: 86, y: 258, color: '#fff', fontSize: 16 }
     const newObj = [...staticInfo, newAreaInfo, newImgInfo, maskInfo, buildingLabel, newBuildingInfo]
-    const url = await drawImageToCanvas(newObj, canvasId, api)
+    const url = await drawImageToCanvas(newObj, canvasId, api, { bgc: '#f2f2f2' })
     resolve(url)
   })
 }