sharp分割图片 / 网络研习社#87

最近在开发AI绘图时，Midjourney生成图像时是一次就是四张，并且这四张是长一起的！分析了一下这张图片，其实这并不是一张小图，而是一张大图（7M以上）！它其实就是成品，并不需要额外地再去放大生成一次！discord中要再次生成，估计也是想要你多消费吧。获取的数据如下：

{
  id: '1186583581955469334',
  flags: 0,
  content: '**futuristic motorcycle concept inspired by Egyptian mythology** - <@901742107700633620> (fast)',
  hash: 'cb0ebbd9-ab8f-472d-b9a6-8d42d9bc9189',
  progress: 'done',
  uri: ',
  proxy_url: ',
  options: [
    {
      type: 2,
      style: 2,
      label: 'U1',
      custom: 'MJ::JOB::upsample::1::cb0ebbd9-ab8f-472d-b9a6-8d42d9bc9189'
    },
    {
      type: 2,
      style: 2,
      label: 'U2',
      custom: 'MJ::JOB::upsample::2::cb0ebbd9-ab8f-472d-b9a6-8d42d9bc9189'
    },
    {
      type: 2,
      style: 2,
      label: 'U3',
      custom: 'MJ::JOB::upsample::3::cb0ebbd9-ab8f-472d-b9a6-8d42d9bc9189'
    },
    {
      type: 2,
      style: 2,
      label: 'U4',
      custom: 'MJ::JOB::upsample::4::cb0ebbd9-ab8f-472d-b9a6-8d42d9bc9189'
    },
    {
      type: 2,
      style: 2,
      label: '',
      custom: 'MJ::JOB::reroll::0::cb0ebbd9-ab8f-472d-b9a6-8d42d9bc9189::SOLO'
    },
    {
      type: 2,
      style: 2,
      label: 'V1',
      custom: 'MJ::JOB::variation::1::cb0ebbd9-ab8f-472d-b9a6-8d42d9bc9189'
    },
    {
      type: 2,
      style: 2,
      label: 'V2',
      custom: 'MJ::JOB::variation::2::cb0ebbd9-ab8f-472d-b9a6-8d42d9bc9189'
    },
    {
      type: 2,
      style: 2,
      label: 'V3',
      custom: 'MJ::JOB::variation::3::cb0ebbd9-ab8f-472d-b9a6-8d42d9bc9189'
    },
    {
      type: 2,
      style: 2,
      label: 'V4',
      custom: 'MJ::JOB::variation::4::cb0ebbd9-ab8f-472d-b9a6-8d42d9bc9189'
    }
  ],
  width: 2048,
  height: 2048
}

Midjourney一次生成的图像

从图中可以看到，图片的精度已经足够，没有心要再去单独生成放大图。至于变异图，再生成一次就好啦。好了，那摆在眼前的就是将这个拼图平均拆成四份，再上传到服务器，得到需要的url地址.

这里用到的拆分的包是sharp, 拆分的图传到IPFS网络， 就这么个思路。

sharp使用

npm install sharp --save

import sharp from 'sharp'

async function splitImageIntoFour(inputImagePath) {
  try {
    // 读取图片信息
    const metadata = await sharp(inputImagePath).metadata()
    console.log(566, metadata)
    /*
    {
        format: 'png',
        width: 2048,
        height: 2048,
        space: 'srgb',
        channels: 3,
        depth: 'uchar',
        density: 72,
        isProgressive: false,
        hasProfile: false,
        hasAlpha: false
      }
    */

    // 计算每个部分的尺寸
    const width = metadata.width / 2
    const height = metadata.height / 2
    console.log(233, "width height", width, height)
 

    // 分别裁剪四个部分
    const topLeft = sharp(inputImagePath).extract({ left: 0, top: 0, width, height })
    await topLeft.toFile('./top-left.png')           
    const topRight = sharp(inputImagePath).extract({ left: width, top: 0, width, height })
    await topRight.toFile('./top-right.png')
    const bottomLeft = sharp(inputImagePath).extract({ left: 0, top: height, width, height })
    await bottomLeft.toFile('./bottom-left.png')
    const bottomRight = sharp(inputImagePath).extract({ left: width, top: height, width, height })
    await bottomRight.toFile('./bottom-right.png')

    console.log('图片已成功四等分')

  } catch (error) {
    console.error('发生错误:', error)
  }
}

// 调用函数，传入图片路径
splitImageIntoFour('./image/test.png')

//也可以直接传入网络图片，以buffer传入
const url = "https://cdn.discordapp.com/attachments/107386208241ebb513ea501934aabf0a&"
const response = await fetch(url)
const bufferX = await response.arrayBuffer()
splitImageIntoFour(bufferX)

上传网络图片到IPFS

import fetch from 'node-fetch'

let url = "
const response = await fetch(url)
const bufferX = await response.arrayBuffer()
const content = Buffer.from(bufferX)
let resX = await ipfs.add(content)
let imgHash = resX.path
console.log(88, resX, 456, imgHash)

AI·Joe 已新增了Midjourney模型，欢迎大家使用！