FirebaseのCloud Functionsで、Puppeteerを使用して絵文字入りのスクリーンショットを撮ろうとしているのですが、絵文字が文字化けしてしまいます。
CloudFunctionsのPuppeteerが絵文字フォントを読み込んでいないのが原因のようなので、@font-faceで絵文字フォントを指定しようとしているのですが、うまくいきません。
Cloud Functionsのコードは以下の通りです。
(以下のscreenshot()関数をCloudFunctionsのHTTPS関数内から呼び出しています。)
import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
admin.initializeApp();
const storage = admin.storage();
const puppeteer = require('puppeteer');
function screenshot() {
(async () => {
const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] });
const page = await browser.newPage();
await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36');
await page.evaluate(() => {
const style = document.createElement('style')
style.textContent = `
@font-face {
font-family: "emoji";
src:local("Noto Color Emoji"),
url("./NotoColorEmoji.ttf");
};
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: local("Noto Sans CJK JP"),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
};
body, svg{ font-family: "Noto Sans JP", "emoji", sans-serif; };`
document.head.appendChild(style);
document.body.style.fontFamily = "'Noto Sans JP', 'emoji' , sans-serif";
})
await page.waitFor(5000); // waiting time to load font
await page.goto("https://getemoji.com/"); //絵文字入りのサイトに移動
await page.screenshot({
path: '/tmp/screenshot.png',
omitBackground: true,
})
.then(() => {
// スクリーンショットをstorageにアップロード
storage.bucket('bucketName').upload('/tmp/screenshot.png')
.then(() => {
console.log("success");
})
.catch(error => {
console.log(error);
});
})
.catch(e => {
console.log(e);
});
})();
}
解決策のわかる方いましたらアドバイスいただけると幸いです。
この場合はgotoにwaitUntilのoptionを追加する。