uni-canvas-image 1.0.0

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "uni-canvas-image",
+  "version": "1.0.0",
+  "description": "租房项目使用uniapp canvas合并图片",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/src/common/index.js

@@ -0,0 +1,137 @@
+export const directionEnum = { NORTH: '北', EAST: '东', SOUTH: '南', WEST: '西', NORTH_EAST: '东北', SOUTH_EAST: '东南', SOUTH_WEST: '西南', NORTH_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 = {
+        ...imageInfo,
+        ...getMaxSizeByRatio(imageInfo.width, imageInfo.height, targetRatio),
+        type: 'image',
+      }
+      resolve(newImageInfo)
+    } else {
+      resolve({
+        type: 'rect2',
+        color: '#f2f2f2',
+      })
+    }
+  })
+}
+
+function getMaxSizeByRatio(width, height, targetRatio = 5 / 4) {
+  // const targetRatio = 5 / 4 // 1.25
+  const originalRatio = width / height
+  let sWidth, sHeight
+  let sx = 0
+  let sy = 0
+
+  if (originalRatio > targetRatio) {
+    // 原始图片更宽，以高度为基准
+    sHeight = height
+    sWidth = Math.round(sHeight * targetRatio)
+    sx = (width - sWidth) / 2
+  } else {
+    // 原始图片更高或比例相同，以宽度为基准
+    sWidth = width
+    sHeight = Math.round(sWidth / targetRatio)
+    sy = (height - sHeight) / 2
+  }
+
+  return { sx, sy, sWidth, sHeight }
+}
+
+export async function base64ToBlob(base64Data) {
+  const response = await fetch(base64Data)
+  return await response.blob()
+}
+
+export async function drawImageToCanvas(arr, canvasId = 'canvas-1', api) {
+  return new Promise((resolve, reject) => {
+    const ctx = uni.createCanvasContext(canvasId)
+    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)
+        ctx.setFillStyle(color)
+        ctx.setTextBaseline('top')
+        ctx.fillText(text, x, y)
+      } else if (item.type === 'rect') {
+        const { x, y, width, height, borderRadius, color } = item
+        ctx.fillStyle = color // 填充
+        roundedRectPath(ctx, x, y, width, height, borderRadius) // x, y, width, height, radius
+        ctx.fill()
+      } else if (item.type === 'rect2') {
+        console.log(item, 'item')
+        const { dx: x, dy: y, dWidth: width, dHeight: height, color } = item
+        ctx.setFillStyle(color) // 填充
+        ctx.fillRect(x, y, width, height) // x, y
+      }
+    })
+    ctx.draw(false, () => {
+      uni.canvasToTempFilePath({
+        canvasId,
+        fileType: 'jpg',
+        quality: 0.1,
+        destWidth: 1500,
+        destHeight: 1200,
+        success: async (tempRes) => {
+          ctx.clearRect(0, 0, 375, 300)
+          let filePath
+          // #ifdef MP-WEIXIN
+          filePath = tempRes.tempFilePath
+          // #endif
+          // #ifdef H5
+          const blob = await base64ToBlob(tempRes.tempFilePath)
+          filePath = URL.createObjectURL(blob)
+          // #endif
+          if (!api) return resolve(filePath)
+          else {
+            const { result } = await api('/third-party/open/upload/uploadFile', filePath, {}, 'file')
+            resolve(result)
+            // #ifdef MP-WEIXIN
+            uni.getFileSystemManager().unlink({ filePath })
+            // #endif
+            // #ifdef H5
+            URL.revokeObjectURL(filePath)
+            // #endif
+          }
+        },
+        fail: (err) => {
+          console.error('生成临时文件失败:', err)
+        },
+      })
+    })
+  })
+}
+
+function roundedRectPath(ctx, x, y, width, height, radius) {
+  // 防止半径超过宽高一半
+  radius = Math.min(radius, width / 2, height / 2)
+  ctx.beginPath()
+  ctx.moveTo(x + radius, y) // 左上开始，略过圆角
+  ctx.lineTo(x + width - radius, y) // 上边线
+  ctx.quadraticCurveTo(x + width, y, x + width, y + radius) // 右上圆角
+  ctx.lineTo(x + width, y + height - radius) // 右边线
+  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height) // 右下圆角
+  ctx.lineTo(x + radius, y + height) // 下边线
+  ctx.quadraticCurveTo(x, y + height, x, y + height - radius) // 左下圆角
+  ctx.lineTo(x, y + radius) // 左边线
+  ctx.quadraticCurveTo(x, y, x + radius, y) // 左上圆角
+  ctx.closePath()
+}
+
+export function handleParagraph(text, lineLength = 25, line = 2) {
+  if (!text) return []
+  const textArray = []
+  for (let i = 0; i < line; i++) {
+    let str = text.slice(i * lineLength, (i + 1) * lineLength)
+    if (i === line - 1 && text.length > (i + 1) * lineLength) str = str.slice(0, -1) + '...'
+    if (str.trim()) textArray.push(str)
+  }
+  return textArray
+}

package/src/index.js

@@ -0,0 +1,3 @@
+export { default as houseImage } from './util/houseImage'
+export { default as noteImage } from './util/noteImage'
+export { default as coverImage } from './util/coverImage'

package/src/util/coverImage.js

@@ -0,0 +1,74 @@
+import { getMaxSizeByRatio, drawImageToCanvas } from '../common/index'
+
+const canvasSize = {
+  w: 375,
+  h: 300,
+}
+const imgSize = {
+  w: 0,
+  h: 0,
+}
+
+const coverImage = (params = {}) => {
+  const { data, canvasId, api } = params
+  return new Promise(async (resolve, reject) => {
+    const imgs = data?.filter((i) => i.type === 'image').map((i) => i.content)
+    if (imgs.length === 0) return resolve('')
+    else if (imgs.length < 4) return resolve(imgs[0]) //小于4 为1张不用拼图
+    const newImageInfos = await handleImgInfo(imgs)
+    const drawImgs = await calculateOperation(newImageInfos)
+    const newDrawImgs = drawImgs.map((i) => {
+      return {
+        ...i,
+        dx: i.x,
+        dy: i.y,
+        dWidth: imgSize.w,
+        dHeight: imgSize.h,
+        type: 'image',
+      }
+    })
+    const url = await drawImageToCanvas(newDrawImgs, canvasId, api)
+    resolve(url)
+  })
+}
+
+async function handleImgInfo(imgs) {
+  return new Promise(async (resolve, reject) => {
+    const imageInfos = await Promise.all(imgs.map((src) => uni.getImageInfo({ src })))
+    const newImageInfos = imageInfos.map((i) => {
+      return {
+        ...i,
+        ...getMaxSizeByRatio(i.width, i.height),
+      }
+    })
+    resolve(newImageInfos)
+  })
+}
+function calculateOperation(newImageInfos) {
+  let drawImgs = []
+  let count
+  const length = newImageInfos.length
+  if (length === 4 || length < 9) {
+    imgSize.w = canvasSize.w / 2
+    imgSize.h = canvasSize.h / 2
+    count = 4
+  } else if (length >= 9) {
+    imgSize.w = canvasSize.w / 3
+    imgSize.h = canvasSize.h / 3
+    count = 9
+  }
+  drawImgs = newImageInfos.slice(0, count)
+  drawImgs = drawImgs.map((i, index) => {
+    if (count === 4) {
+      i.x = index % 2 === 0 ? 0 : canvasSize.w / 2
+      i.y = index < 2 ? 0 : canvasSize.h / 2
+    } else if (count === 9) {
+      i.x = index % 3 === 0 ? 0 : index % 3 === 1 ? canvasSize.w / 3 : (canvasSize.w / 3) * 2
+      i.y = index < 3 ? 0 : index < 6 ? canvasSize.h / 3 : (canvasSize.h / 3) * 2
+    }
+    return i
+  })
+  return drawImgs
+}
+
+export default coverImage

package/src/util/houseImage.js

@@ -0,0 +1,144 @@
+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' },
+]
+/**
+ *
+ * @param {Object Array} data 房源数据数组
+ * @returns {String} 处理后的图片URL
+ */
+async function houseImage(params = {}) {
+  const { data, canvasId, api } = params
+  if (!data) return reject('数据不能为空')
+  const items = Array.isArray(data) ? data : [data]
+  return items.length > 1
+    ? await handleItems(items, canvasId, api) // 多个房源
+    : await handleItem(items[0], canvasId, api) // 单个房源
+}
+//单个房源
+async function handleItem(obj, canvasId, api) {
+  return new Promise(async (resolve, reject) => {
+    const imgInfo = await getImageInfo(obj.imageUrl, 750 / 340)
+    const newImgInfo = {
+      ...imgInfo,
+      dx: 0,
+      dy: 0,
+      dWidth: 375,
+      dHeight: 170,
+    }
+    const paragraphInfos = handleParagraph(obj.title)
+    const titleInfos = paragraphInfos.map((text, index) => {
+      return {
+        type: 'text',
+        text,
+        x: 10,
+        y: 180 + index * 20,
+        fontSize: 14,
+        color: '#000',
+      }
+    })
+    const tagsInfos = hanleTagsInfo(obj.tags, 14, titleInfos.length > 1 ? 224 : 216)
+    const categoryInfos = handleCategoryInfo(obj, categoryEnum)
+    const newObj = [newImgInfo, ...titleInfos, ...tagsInfos, ...categoryInfos]
+    const url = await drawImageToCanvas(newObj, canvasId, api)
+    resolve(url)
+  })
+}
+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]
+      // 图片
+      const imgInfo = await getImageInfo(obj.imageUrl, 1 / 1)
+      const newImgInfo = {
+        ...imgInfo,
+        dx: 0,
+        dy: i * 152,
+        dWidth: 148,
+        dHeight: 148,
+      }
+      // 标题
+      const paragraphInfos = handleParagraph(obj.title, 14)
+      const titleInfos = paragraphInfos.map((text, index) => {
+        return {
+          type: 'text',
+          text,
+          x: 160,
+          y: 10 + i * 152 + index * 20,
+          fontSize: 14,
+          color: '#000',
+        }
+      })
+      // 标签
+      const tagsInfos = hanleTagsInfo(obj.tags, 160, 60 + 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' },
+      ]
+      const categoryInfos = handleCategoryInfo(obj, category)
+      newObj.push(newImgInfo, ...titleInfos, ...tagsInfos, ...categoryInfos)
+    }
+    const url = await drawImageToCanvas(newObj, canvasId, api)
+    resolve(url)
+  })
+}
+
+function hanleTagsInfo(tags, x = 14, y = 224) {
+  if (!tags || tags.length === 0) return []
+  const tagsInfos = tags.map((tag, index) => {
+    return {
+      type: 'text',
+      text: tag,
+      // 前面标签的长度和间距计算x坐标
+      x: x + tags.slice(0, index).reduce((acc, cur) => acc + cur.length, 0) * 12 + index * 18, // 根据
+      y,
+      fontSize: 12,
+      color: '#377DF3',
+    }
+  })
+  //tga背景颜色
+  const rects = tagsInfos.map((tag, index) => {
+    return {
+      type: 'rect',
+      x: tag.x - 4,
+      y: tag.y - 6,
+      width: tag.text.length * 12 + 8,
+      height: 20,
+      borderRadius: 4,
+      color: '#ebf1ff',
+    }
+  })
+  return [...rects, ...tagsInfos]
+}
+
+function handleCategoryInfo(obj, categoryEnum) {
+  const newArr = categoryEnum.map((item) => {
+    item.type = 'text'
+    if (item.name) {
+      if (item.key === 'direction') {
+        item.text = directionEnum[obj?.direction[0]] + (obj?.direction.length > 1 ? '...' : '')
+      } else item.text = obj[item.key] || ''
+    }
+    return item
+  })
+  return newArr
+}
+
+export default houseImage

package/src/util/noteImage.js

@@ -0,0 +1,98 @@
+import { getImageInfo, drawImageToCanvas, handleParagraph } from '../common/index'
+/**
+ *
+ * @param {Object Array} data 笔记数据数组
+ * @returns {String} 处理后的图片URL
+ */
+async function noteImage(params = {}) {
+  const { data, canvasId, api } = params
+  if (!data) return reject('数据不能为空')
+  const items = Array.isArray(data) ? data : [data]
+  return items.length > 1
+    ? await handleItems(items, canvasId, api) // 多个房源
+    : await handleItem(items[0], canvasId, api) // 单个房源
+}
+
+function handleItem(obj, canvasId) {
+  return new Promise(async (resolve, reject) => {
+    const imgInfo = await getImageInfo(obj.imageUrl, 750 / 340)
+    const newImgInfo = {
+      ...imgInfo,
+      dx: 0,
+      dy: 0,
+      dWidth: 375,
+      dHeight: 170,
+    }
+    const paragraphInfos = handleParagraph(obj.title)
+    const titleInfos = paragraphInfos.map((text, index) => {
+      return {
+        type: 'text',
+        text,
+        x: 10,
+        y: 180 + index * 20,
+        fontSize: 14,
+        color: '#000',
+      }
+    })
+    const contentInfos = handleParagraph(obj.content, 31, 3)
+    const newContentInfos = contentInfos.map((text, index) => {
+      return {
+        type: 'text',
+        text,
+        x: 10,
+        y: 230 + index * 18,
+        fontSize: 12,
+        color: '#9B9B9B',
+      }
+    })
+    const newObj = [newImgInfo, ...titleInfos, ...newContentInfos]
+    const url = await drawImageToCanvas(newObj, canvasId, api)
+    resolve(url)
+  })
+}
+function handleItems(arr, canvasId) {
+  return new Promise(async (resolve, reject) => {
+    const newObj = []
+    const newArr = arr.slice(0, 2)
+    for (let i = 0; i < newArr.length; i++) {
+      const obj = newArr[i]
+      // 图片
+      const imgInfo = await getImageInfo(obj.imageUrl, 1 / 1)
+      const newImgInfo = {
+        ...imgInfo,
+        dx: 10,
+        dy: i * 140 + 10,
+        dWidth: 120,
+        dHeight: 120,
+      }
+      const paragraphInfos = handleParagraph(obj.title, 16)
+      const titleInfos = paragraphInfos.map((text, index) => {
+        return {
+          type: 'text',
+          text,
+          x: 144,
+          y: 10 + i * 140 + index * 20,
+          fontSize: 14,
+          color: '#000',
+        }
+      })
+      const contentInfos = handleParagraph(obj.content, 24, 4)
+      const newContentInfos = contentInfos.map((text, index) => {
+        return {
+          type: 'text',
+          text,
+          x: 144,
+          y: 60 + i * 140 + index * 18,
+          fontSize: 10,
+          color: '#9B9B9B',
+        }
+      })
+      newObj.push(newImgInfo, ...titleInfos, ...newContentInfos)
+    }
+
+    const url = await drawImageToCanvas(newObj, canvasId, api)
+    resolve(url)
+  })
+}
+
+export default noteImage