html2canvasを使ってVue.js のサイトを画像で切り取る

##html2canvasを使いたい


今回はVue.jsで作ったhtmlをhtml2canvasで画像にしたいと思います

##参考資料

[【2019年度版】Windowsでhtmlを画像化する方法(html2canvasの使い方)]
(https://wakubeku.com/?p=175)
[【資料2】html2canvasとVue.jsでつくるコラ画像ジェネレータ]
(https://wood-roots.com/web/vue-js/2253)
[ 【エラー用資料】Vue.jsの初歩的なミス]
(https://qiita.com/mimoe/items/b2ebfc1b38e5a905d19b)




##環境

Windows 10 
Visual Studio Code: 1.40.1 (system setup)
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.18362




##index.htmlを作成

基本コード

```html


<!DOCTYPE html>
<html lang="ja" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>"html2canvas" </title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!--Vue.jsの適用headに入れると全部に適応される-->
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-alpha.12/dist/html2canvas.min.js"></script>
    <!--html2canvasの適用headに入れると全部に適応される-->


    <style type="text/css">
		/* コラ画像用のCSS */
		#preview {
			overflow: auto;
			width: 100%;
		}
		
		/*
		#preview_inner {
			background: url(https://3.bp.blogspot.com/-cPqdLavQBXA/UZNyKhdm8RI/AAAAAAAASiM/NQy6g-muUK0/s800/syougatsu2_omijikuji2.png) no-repeat left bottom;
			background-size: 200px auto;
			position: relative;
			padding-bottom: 250px;
			width: 600px;
		}*/
		
		#baloon {
			position: relative;
			border: 4px solid #ff8888;
			background: #fff;
			border-radius: 8px;
			display: inline-block;
			font-weight: bold;
			font-size: 1.2rem;
			color: #444;
			padding: 10px;
			min-width: 200px;
			white-space: pre-wrap;
		}
		
		#baloon:before,
		#baloon:after {
			content: '';
			display: block;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 50px 15px 0 15px;
			border-color: #fff transparent transparent transparent;
			position: absolute;
			left: 20px;
			bottom: -50px;
		}
		
		#baloon:before {
			left: 16px;
			bottom: -60px;
			border-width: 58px 19px 0 19px;
			border-color: #ff8888 transparent transparent transparent;
		}
	
    </style>

</head>

<body>

    <div id="preview">
            <!--<div id="preview_inner">-->
                <div id="baloon">
                    <p>{{ message }}</p>
                    </div>
					
				<!--</div>-->
				<p>
					<img width="200" src="https://3.bp.blogspot.com/-cPqdLavQBXA/UZNyKhdm8RI/AAAAAAAASiM/NQy6g-muUK0/s800/syougatsu2_omijikuji2.png">
				</p>
            <textarea class="form-control" v-model="message"></textarea>
    </div>

    <div>
    <button class="btn btn-primary btn-block" v-on:click="generate">画像を生成</button>
    </div>

    <script>
        var app = new Vue({
            el: '#preview',
            data: {
                message: ''
            },
            methods: {
                
            }
		})
	</script>

	<script>
	var generate = html2canvas(document.querySelector("#preview")).then(canvas => {
			document.body.appendChild(canvas)
		});
	</script>

</body>

</html>
```

HTML
にアクセス。

一部は画像に変換できたものの、
ターミナルとブラウザで検証をして見つかるエラーは消せたのですが
画像を含めて生成はできませんでした。
文字とかは画像化できるのですが、、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508651/4557a94e-8450-9f1c-edde-fdbce81fe269.png)

あと、画像を生成を押す前からずっと出ています。
せっかく作ったボタンの意味！！
ここの原因はたぶんここ

```javascript:

	<script>
	var generate = html2canvas(document.querySelector("#preview")).then(canvas => {
			document.body.appendChild(canvas)
		});
	</script>

```

見るからにうまく組めていない怪しいコード。
ボタンを押した関数のgenerateで動いて欲しい、かつhtml2canvasを使いたい。
色々試して書いたのですが思いついたものはどれも駄目でした(´；ω；`)

あとはおみくじ画像がうまく画像化されない件。
こちらもstyleに埋め込んでいるから駄目なのかとimgタグでdivの中に持ってきたりしましたがどちらも駄目でした。




##【エラー】Uncaught ReferenceError: Vue is not defined
これはそもそもHTMLとVue.jsの仕組みがきちんと分かっていない為に起きたエラーでした。
備忘録的に分かった事を書いておこうと思います。
下記コードの黄色線を引いてる部分を/bodyの直前にもってきていたのが失敗で、
読み込めていませんでした。


<img width="800" alt="2CB828C3-033A-42DC-9D26-949822778374.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508651/253da02b-cb5e-8ff9-2fb6-27b08b508712.jpeg">





##完成品
<img width="300" alt="2020-01-23_00h41_03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508651/511a748d-fe84-cd90-bf97-678c3860575a.png">


html2canvasとVue.jsは使えたものの目指していた形にはなりませんでした。
アドバイスありましたら随時募集中です。もしくは万が一少しでも参考になりましたら幸いです。
ありがとうございました。