html2canvas で 文字だけレンダリングされない
解決したいこと
html2canvasで、ブラウザ上の画面を画像化しようとしているのですが、
何故か文字だけレンダリングされません。
解決方法を教えて頂けると助かります🙏
発生している問題・エラー
▼ [save]ボタンをクリックすると、指定された薄いグレーの領域がキャプチャされ、ページ下部に画像が追加されるが...
▼ ...何故か文字だけレンダリングされない
該当するソースコード
全体はnuxtを使用しています。
.../app/pages/edit.vue
<template lang="pug">
section.l-sample
.capture(ref="capture") Hello World!
h4 123
img(src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_light_color_272x92dp.png")
button(@click="captureImage") save
</template>
<script>
import html2canvas from 'html2canvas'
export default {
layout: 'noauth',
methods: {
async captureImage () {
const canvas = await html2canvas(this.$refs.capture,{
logging: true,
allowTaint: true,
})
document.body.appendChild(canvas);
}
}
}
</script>
<style lang="scss">
.l-sample {
padding: 1rem;
background: teal;
.capture {
background: #ccc;
color: black;
}
h4 { background: red; }
img { width: 200px; }
button {
background: gray;
padding: 0.5rem;
border: solid thin #666;
}
}
</style>
ログ(chrome)
自分で試したこと
1
