バイナリ形式の画像をアップロードする【HTML・JS(jQuery)・PHP】

通常であれば、画像のサーバへのアップロードは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;
}

参考・関連記事

・当ブログ記事:canvas要素を使って、画像の上にテキストを描画。【HTML・JS(jQuery)】

・FindxFine:Canvasに描画した画像をjQuery.ajaxでサーバーに保存する : JavaScript

コメント

タイトルとURLをコピーしました