https://2nd-train.net/trainrecords/ というサービスを運営しています。実際に運用を始めたところPCでは問題ないものの、スマートフォンでSVGから画像作成をすると、画面サイズに応じて小さい画像しか生成されない不具合があることがわかりました。
どの部分を修正すればどのような端末でも1200×630の固定サイズで画像を作成できますでしょうか?
「作成ボタン」を押すとcreate関数が走り以下の部分が動いて画像生成されます。
javascript
1create() { 2 3 // 擬似canvas要素を作成 4 var canvas = document.createElement('canvas') 5 var svg = this.$refs.svgArea 6 canvas.width = 1200; 7 canvas.height = 630; 8 9 // SVG → Canvas 変換 10 const data = new XMLSerializer().serializeToString(this.$refs.svgArea); 11 canvg(canvas, data) 12 13 // 作成 14 let image = canvas.toDataURL('image/jpeg').split(',')[1] 15 16}
使っているもの
Vue.js v2.6.10
canvg.min.js https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js
あなたの回答
tips
プレビュー