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);