云開發(fā) 圖像處理

一、二維碼qrcode

在移動(dòng)互聯(lián)網(wǎng)時(shí)代，二維碼是一個(gè)非常重要的入口，有時(shí)候我們需要將一些文本、網(wǎng)址乃至文件、圖片、名片等信息放置到一個(gè)小小的二維碼里，讓用戶可以通過(guò)手機(jī)掃碼的方式來(lái)獲取傳遞的信息。云函數(shù)也可以借助于第三方模塊，比如node-qrcode來(lái)創(chuàng)建二維碼。

技術(shù)文檔：node-qrcode Github地址

使用開發(fā)者工具，創(chuàng)建一個(gè)云函數(shù)，如qrcode，然后在package.json增加qrcode最新版latest的依賴并用npm install安裝：

"dependencies": {
    "qrcode": "latest"
  }

然后再在index.js輸入如下代碼，這里會(huì)先將創(chuàng)建的二維碼寫入到臨時(shí)文件夾，然后再用fs.createReadStream方法讀取圖片，上傳到云存儲(chǔ)，還是以云存儲(chǔ)為過(guò)渡，實(shí)現(xiàn)文件由服務(wù)端到小程序端的一個(gè)操作。

const cloud = require('wx-server-sdk')
const fs = require('fs')
const QRCode = require('qrcode')
cloud.init({
    env: cloud.DYNAMIC_CURRENT_ENV
  })
exports.main = async (event, context) => {
//text為二維碼里包含的內(nèi)容，將創(chuàng)建的二維碼圖片先存儲(chǔ)到/tmp臨時(shí)文件夾里，命名為qrcode.png
  const text="二維碼里的有騰訊云云開發(fā)"
  await QRCode.toFile('/tmp/qrcode.png',text, {
  color: {
    dark: '#00F',  // 藍(lán)點(diǎn)
    ight: '#0000' // 透明底
  }
}, function (err) {
    if (err) throw err
    console.log('done')
   })


  //讀取存儲(chǔ)到/tmp臨時(shí)文件夾里的二維碼圖片并上傳到云存儲(chǔ)里，返回fileID到小程序端
  const fileStream = await fs.createReadStream('/tmp/qrcode.png')
  return await cloud.uploadFile({
    cloudPath: 'qrcode.jpg',
    fileContent: fileStream,
  })
}

執(zhí)行云函數(shù)之后就能在云存儲(chǔ)里看到我們生成的二維碼圖片qrcode.jpg了。如果想要深度定制更加符合你要求的二維碼，可以去翻閱上面給的技術(shù)文檔鏈接。

二、Sharp高速圖像處理庫(kù)

sharp是一個(gè)高速圖像處理庫(kù)，可以很方便的實(shí)現(xiàn)圖片編輯操作，如裁剪、格式轉(zhuǎn)換、旋轉(zhuǎn)變換、濾鏡添加、圖片合成（如添加水印）、圖片拼接等，支持JPEG, PNG, WebP, TIFF, GIF 和 SVG格式。在云函數(shù)端使用sharp來(lái)處理圖片，而云存儲(chǔ)則可以作為服務(wù)端和小程序端來(lái)傳遞圖片的橋梁。

由于圖片處理是一件非常消耗性能的事情，不僅會(huì)對(duì)云函數(shù)的內(nèi)存有要求，也可能會(huì)造成云函數(shù)的超時(shí)，以下只是研究使用云函數(shù)來(lái)處理圖片的可行性，大家在實(shí)際開發(fā)中不要這么處理，建議使用云開發(fā)的拓展能力來(lái)對(duì)圖像進(jìn)行處理，功能更加強(qiáng)大（在后面的章節(jié)里，我們會(huì)介紹）。

技術(shù)文檔：sharp官方技術(shù)文檔

使用開發(fā)者工具，創(chuàng)建一個(gè)云函數(shù)，如sharp，然后在package.json增加node-qrcode最新版latest的依賴，并右鍵云函數(shù)目錄選擇在終端中打開輸入命令npm install安裝依賴：

"dependencies": {
    "sharp": "latest"
 }

然后再在index.js輸入如下代碼，這里我們假定圖片來(lái)源是云存儲(chǔ)，我們需要先下載圖片，然后用sharp對(duì)圖片進(jìn)行處理，處理完之后再把圖片傳回云存儲(chǔ)。

const cloud = require('wx-server-sdk')
const fs = require('fs')
const path = require('path')
cloud.init({
    env: cloud.DYNAMIC_CURRENT_ENV,
})
const sharp = require('sharp');
exports.main = async (event, context) => {


//這里換成自己的fileID，也可以在小程序端上傳文件之后，把fileID傳進(jìn)來(lái)event.fileID
    const fileID = 'cloud://xly-xrlur.786c-xly-xrlur-1300446086/1572315793628-366.png'


//要用云函數(shù)處理圖片，需要先下載圖片，返回的圖片類型為Buffer
    const res = await cloud.downloadFile({
      fileID: fileID,
    })
    const buffer = res.fileContent  


//sharp對(duì)圖片進(jìn)行處理之后，保存為output.png，也可以直接保存為Buffer
    await sharp(buffer).rotate().resize(200).toFile('output.png')
// 云函數(shù)讀取模塊目錄下的圖片，并上傳到云存儲(chǔ)
    const fileStream = await fs.createReadStream(path.join(__dirname, 'output.png'))
    return await cloud.uploadFile({
        cloudPath: 'sharpdemo.jpg',
        fileContent: fileStream,
    })
}

也可以讓sharp不需要先toFile轉(zhuǎn)成圖片，而是直接轉(zhuǎn)成Buffer，這樣就可以直接作為參數(shù)傳給fileContent上傳到云存儲(chǔ)，如：

const buffer2 = await sharp(buffer).rotate().resize(200).toBuffer();
    return await cloud.uploadFile({
        cloudPath: 'sharpdemo2.jpg',
        fileContent: buffer2,
    })

需要說(shuō)明的是sharp有一定的前置條件，Node.js 的版本需要是v10.13.0+，以及云函數(shù)所在的服務(wù)器配置了libvips binaries，目前云開發(fā)的云函數(shù)不太支持，未來(lái)云開發(fā)會(huì)升級(jí)Nodejs的版本。關(guān)于圖片處理的庫(kù)，我們也可以去Github awesome-nodejs 項(xiàng)目里去翻翻看有沒有其他合適的解決方案，不過(guò)更加推薦的是使用云開發(fā)的圖像處理拓展能力，更或者說(shuō)強(qiáng)烈建議所有有圖片處理需求的用戶都應(yīng)該安裝圖像處理拓展能力。