【Nuxt.js & Vue.js】 svgをpngに変換してダウンロード
上記のように、左側のsvgを、pngに変換しダウンロードする方法を紹介します
大まかな流れは、
＊imageタグを新規作成
＊svg内の描画をBase64形式に変換したものを、上記で作成したimageタグのsrc に設定
＊canvas内で上記のimageを描画（キャンバスに一旦描画しないとダウンロードできないため）
＊canvasの描画データをBase64形式に変換し、ダウンロードリンクのhrefにセット
画像にしたいsvgの描画については、下記などを参考に！
index.vue
<template>
<div class="row">
<div class="col-6">
<svg id="artboard" xmlns="http://www.w3.org/2000/svg" style="background-color:#ccc" width="500" height="500" viewbox="0 0 500 500"><!-- ここに、画像にしたいsvg描画 -->
</svg>
</div>
<div class="col-6">
<div><button @click="svg2imageData">変換する</button></div>
<canvas id='converted-canvas' width="" height=""></canvas>
<a v-show="show" :href="download_href" id="icon-download" type="application/octet-stream" download="your_icon.png">Download</a>
</div>
</div>
</template>
<script>
export default {
data () {
return {
show: false, // Downloadボタンを隠しておく
download_href: ' ' //Downloadする対象の画像は最初は無し
}
},
methods: {// canvas 内にimage要素を追加するため、image要素を新規作成し、srcを設定する関数
loadImage(src) {
// image作成には時間がかかるため、Promise使用
return new Promise((resolve, reject) => {
// image要素を新規作成
const img = new Image()
// new Image() が成功した場合、作成したimage要素を戻り値にする
img.onload = () => resolve(img)
//new Image() が失敗した場合、エラーメッセージを戻り値にする
img.onerror = (e) => reject(e)
// 引数を作成したimage要素のsrcにセット
img.src = src
})
},// 変換するボタンがクリックされたら呼び出される関数
svg2imageData () {// svgタグ内のelementを取得
const svgElement = document.getElementById('artboard')
// elementからただの文字列に変換
const svgData = new XMLSerializer().serializeToString(svgElement)
// 上記で変換した文字列をbase64形式に変換（canvasが処理できるように）
const imgsrc = 'data:image/svg+xml;charset=utf-8;base64,' + btoa(unescape(encodeURIComponent(svgData)))
// 上記のloadimage関数を実行
this.loadImage(imgsrc).then(img => {//this.loadImageが成功時の処理
// ダウンロードボタンの要素を取得
const downloadBtn = document.getElementById('icon-download')
// ダウンロードボタンを表示するようにする
this.show = true
// キャンバス要素を取得
const canvas = document.getElementById('converted-canvas')
// svgの幅をキャンバスの幅にセット
canvas.width = svgElement.width.baseVal.value
// svgの高さをキャンバスの高さにセット
canvas.height = svgElement.height.baseVal.value
// キャンバス内に画像を描画するため、2Dコンテキストを取得
const ctx = canvas.getContext('2d')
// キャンバス内に、loadimage関数で取得したイメージを描画
ctx.drawImage(img, 0, 0, img.width, img.height)
// キャンバス内に描画したイメージをpng形式のbase64形式で変換し、ダウンロードできるようにdownload_hrefにセット
this.download_href = canvas.toDataURL("image/png")
}).catch(e => {
//this.loadImageでエラー時の処理
console.log('onload error', e)
})
}
}
};</script>
以上ですー！
canvas.toDataURL("image/png")の部分を変更することでjpegなど他の形式や、画質も変更することができます
おやすみなさい
