<html>
<meta http-equiv="content-type" charset="utf-8">
<head>
<title>画像のエンコードとデコード</title>
<link rel="icon" href="/favicon.ico">
<meta http-equiv="Expires" content="0">
</head>
<body>
<input id="target" type="file" onchange="inputChange()"> <!-- ファイルから読み込み用 -->
<span id="PasteBoxW" style="border:1px solid;background-color: #FFAAAA;">
<span id="PasteBox" contenteditable="true">ここに画像をペースト</span> <!-- コピペ用 -->
</span>
<br>
<canvas id="CanvasBase" style="border:1px solid;"></canvas><br>
<br>
<button type="button" onclick="img_encodeB64()">BASE64エンコード</button><br>
<textarea id="base64enc" style="width:100%;height:30%;"></textarea><br>
<br>
<button type="button" onclick="img_decodeB64()">デコード</button><br>
<canvas id="CanvasDecode" style="border:1px solid;"></canvas>
<br>
<br>
<br>
<script language="JavaScript">
var CvsBaseEmt = document.getElementById("CanvasBase");
var CvsBaseCtx = CvsBaseEmt.getContext("2d");
// 画像表示
function ViewImage( BlobUrl ) {
const chara = new Image();
chara.onload = () => {
CvsBaseEmt.width = chara.naturalWidth ;
CvsBaseEmt.height = chara.naturalHeight ;
CvsBaseCtx.drawImage(chara, 0, 0 );
// エンコードした文字列を表示
img_encodeB64();
};
chara.src = BlobUrl; // 画像のURLを指定
};
// エンコード
function img_encodeB64() {
// エンコードした文字列を表示
document.getElementById("base64enc").value = CvsBaseEmt.toDataURL("image/jpeg");
};
// デコード
function img_decodeB64() {
const chara = new Image();
chara.onload = () => {
var CvsDecoEmt = document.getElementById("CanvasDecode");
CvsDecoEmt.width = chara.naturalWidth ;
CvsDecoEmt.height = chara.naturalHeight ;
CvsDecoEmt.getContext("2d").drawImage(chara, 0, 0 );
};
chara.src = document.getElementById("base64enc").value;
};
// 貼り付けイベントのリスナセット
contenteditable_paste_addevent();
function contenteditable_paste_addevent() {
// 貼り付けからイメージ取得
document.querySelector("[contenteditable]").addEventListener("paste", function (e) {
var PasteItems = e.clipboardData.items;
for (var Idx = 0; Idx < PasteItems.length; Idx++) {
if (PasteItems[Idx].type.indexOf("image") === 0) {
var BlobUrl = URL.createObjectURL(PasteItems[Idx].getAsFile());
// いろいろ弄れてしまうので戻しておく
document.getElementById("PasteBoxW").innerHTML = '<span id="PasteBox" contenteditable="true">ここに画像をペースト</span>';
// 戻したのでリスナ再セット
contenteditable_paste_addevent();
// 画像表示
ViewImage( BlobUrl );
return;
}
}
});
}
// ローカルファイルからイメージ選択
function inputChange() {
// 画像表示
ViewImage( window.URL.createObjectURL( document.getElementById("target").files[0] ) );
}
</script>
</body>
</html>
