通常であれば、画像のサーバへのアップロードはformを使って行います。
しかし、imgやcanvas要素の画像を直接アップロードしたいケースもあります。
そのような場合には、通常のアップロードは行えないため、一度バイナリ形式でアップロードして、それを画像に変換する必要があります。
canvasに画像を描画して、サーバにアップロードする
コード全文
HTML・JS（jQuery）：キャンバス描画からアップロードまで
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アップロードデモ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<canvas id="preview"></canvas>
</body>
<script>
const canvas = document.getElementById("preview");
const ctx = canvas.getContext('2d');
//canvasに画像を描画する
const image = new Image();
image.src = 'demo.png';
$(image).on('load',function(){
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
const data = {};
// canvasのデータをバイナリ形式（base64）で取得
const canvasData = $('canvas').get(0).toDataURL();
// データから不要な値を削除する
const formatedCanvasData = canvasData.replace(/^data:image\/png;base64,/, '');
data.image = formatedCanvasData;
//ajaxでアップロードする
$.ajax({
type: 'POST',
url: "upload.php",
data: data,
dataType : 'json'
})
.done(function(data){
console.log(data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
});
});
</script>
</html>
PHP：画像をサーバに保存する
//upload.php
<?php
$binary_img = $_POST['image'];
//バイナリ形式の画像をデコードする。
$decode_img = base64_decode($binary_img);
//画像のファイル形式を判定する
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime_type = finfo_buffer($finfo, $decode_img);
$extensions = [
'image/gif' => 'gif',
'image/jpeg' => 'jpg',
'image/png' => 'png'
];
//画像のパスを生成。
$file_path = "/PATH/upload".".".$extensions[$mime_type];
//画像を保存する。成功ならば200、失敗ならば500を返す。
if(file_put_contents($file_path, $decode_img)){
$data = json_encode(["status","200"]);
echo $data;
}else{
$data = json_encode(["status","500"]);
echo $data;
}
コメント