云開發(fā) 圖像處理

一、二維碼qrcode

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

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

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

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

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

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)建的二維碼圖片先存儲到/tmp臨時文件夾里，命名為qrcode.png
  const text="二維碼里的有騰訊云云開發(fā)"
  await QRCode.toFile('/tmp/qrcode.png',text, {
  color: {
    dark: '#00F',  // 藍點
    ight: '#0000' // 透明底
  }
}, function (err) {
    if (err) throw err
    console.log('done')
   })
  //讀取存儲到/tmp臨時文件夾里的二維碼圖片并上傳到云存儲里，返回fileID到小程序端
  const fileStream = await fs.createReadStream('/tmp/qrcode.png')
  return await cloud.uploadFile({
    cloudPath: 'qrcode.jpg',
    fileContent: fileStream,
  })
}

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

二、Sharp高速圖像處理庫

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

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

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

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

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

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

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傳進來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對圖片進行處理之后，保存為output.png，也可以直接保存為Buffer
    await sharp(buffer).rotate().resize(200).toFile('output.png')
// 云函數(shù)讀取模塊目錄下的圖片，并上傳到云存儲
    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上傳到云存儲，如：

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

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