DIV要素を画像化(pngファイル)、さらにサーバー側(バックエンド)に保管

Demo

HTML


<script src="/note_prg/js/jquery-3.5.1.min.js"></script>
<script src="/note_prg/js/vue.min.js"></script>
<script src="html2canvas.min.js"></script>
	
	~ 略 ~
	
<div id="vue_app">
	<textarea v-model='msg1' style="width:100%;height:50"></textarea><br>
	<input type="botton" value="テスト実行" class="btn btn-success" onclick="test1()"/>
	<div id="res" class="text-success"></div>
	<div id="div1" style="display:inline-block;border:1px solid #19a15f;width:600px;padding:10px;" >
		<p>サンプルDiv要素</p><br>
		<div style="float:left;width:49%;"><img src="imori.jpg" alt="" style="width:200px"/></div>
		<div style="float:left;width:49%;">{{msg1}}</div>
	</div>
</div>
<div style="clear:both"></div>

<p>下記は出力された画像です。(demo2.pngを表示)</p>
<img id="img1" src="demo2.png?v=<?php echo date("YmdHis"); ?>" alt="" />
	

JavaScript



$(()=>{
	
			app = new Vue({
				el: '#vue_app',
				data: {
					msg1: 'もはや死はなくなり,悲しみも嘆きも苦痛もなくなります。以前のものは過ぎ去ったのです。 - 聖書より',
				}
			})
})


function test1(){

	window.scrollTo(0, 0); // スクロールをリセットする必要がある。
	let targetElm = jQuery("#vue_app");
	let w = targetElm.outerWidth();
	let h =  targetElm.outerHeight();
	
			// 画像を重ねて表示しているDIV要素を取得する。
		var element = $('#div1')[0];
	
		//DOM要素を画像のバイナリデータに変換する。
		html2canvas(element,{width:w,height:h,scrollX:-8.5,scrollY:0}).then(canvas => {
			// 変換後に呼び出されるコールバック
		
			// MIMEタイプ
			var type = 'image/png';
			
			// DOM要素からバイナリの一種であるデータURLスキームに変換する
			var data_url_scheme= canvas.toDataURL(type).replace("image/png", "image/octet-stream");
	
			// データURLスキームからbase64形式のバイナリデータに変換する
			var base64 = btoa(data_url_scheme);
			base64 = base64.replace(/^.*,/, '');
			
			// ファイル名を指定
			var file_name = "demo2.png";
			file_name = encodeURIComponent(file_name);// URLエンコード
			
			// base64形式のバイナリデータをAjaxでサーバーに送信する。
			$.ajax({
				type: "POST",
				url: "upload.php",
				data: 'base64=' + base64 + '&file_name=' + file_name,
				cache: false,
				dataType: "text",
				success: function(res, type) {
					$('#res').html('サーバーへファイルを保存しました。→ '+res);
					location.reload(true);
				},
				
				error: function(xmlHttpRequest, textStatus, errorThrown){
					console.log(xmlHttpRequest.responseText);
					alert(textStatus);
				}
				
			});// ajax
	
		});
}
	

PHP upload.php


$base64=$_POST['base64'];
$file_name=$_POST['file_name'];

$file_name = urldecode ($file_name);
$file_name = $file_name;
echo $file_name;


// BASE64バイナリ文字列をファイルに変換して書き出す
$base64 = base64_decode($base64);
$base64 = preg_replace("/data:[^,]+,/i","",$base64);
$base64 = base64_decode($base64);
file_put_contents($file_name, $base64);