JavaScript jQueryでAjaxを使いPHPからの画像データをcanvasに表示する方法

2021/05/27

canvas に FileReader オブジェクトを使って、ローカルなコンピューター内にある画像ファイルを読み込むことを説明しました。今回はこの方法に倣って、作成済みの画像データ表示関数を使って PHP から JSON データで送信されてくる画像ファイルデータを描画する方法について説明します。

処理の手順は以下の通りです

ページロード時イベントで Ajax を使って PHP の画像ダウンロードプログラムの呼出
Ajax の正常終了時に JSON データから Blob データ生成
FileReader を生成,画像の描画
FileReader の readAsDataURL メソッドで Blob データを引数としてコール
FileReader の onload イベントで canvas への画像表示関数の実行

■Ajaxを使いPHPからの画像データをcanvasに表示

<html>
<head>
<meta charset="utf-8">
<title>test canvas</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//Image関数
function drawImage(imageFile) {
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    //イメージオブジェクト
    var img1 = new Image();
    //画像ファイル指定でファイル読込開始
    img1.src = imageFile;

    //画像ロード後に画像を描画できる。
    img1.onload = function(){
        //画像の大きさを設定
        width  = img1.width;
        height = img1.height;
        canvas.attr('width' , width);
        canvas.attr('height', height);
        //画像を描画
        ctx.drawImage(img1, 0, 0, width, height);
    }
    return false;
}
// Base64とMIMEタイプからBlobオブジェクト作成
function toBlob(base64, mimetype) {
    var bin = atob(base64.replace(/^.*,/, ''));
    var arr = new Uint8Array(bin.length);
    for (var i = 0; i < bin.length; i++) {
        arr[i] = bin.charCodeAt(i);
    }
    // Blobを作成
    try{
        var blob = new Blob([arr.buffer], { type: mimetype });
    }catch (e){
        return false;
    }
    return blob;
}
//ページロード時イベント
$(function() {
    var file = null; // 選択されるファイル

    // データの取得
    $.ajax({
        type: "POST"
      , url:  "./imagedown.php"
      , data: ""
    }).done(function(res){
        // ajaxがOK
		var data = JSON.parse(res);
        // blobデータ生成
        var blob = toBlob(data.img, data.type);

        //FileReader API
        var reader = new FileReader();
        //ファイルロード終了時イベント宣言
        reader.onload = function(e) {
            //画像表示関数コール
            drawImage(e.target.result);
        };
        //Blobデータ読込の開始
        reader.readAsDataURL(blob);

    }).fail(function(XMLHttpRequest, textStatus, error) {
        // 取得エラー
		alert(error);
    }).always(function() {
        // 後処理(処理することが在れば)
    });
});
</script>
</head>
<body>
    <h2>test canvas4</h2>
    <canvas id="canvas" width="100" height="100" style="border: 1px solid #000000;"></canvas>
    <br />
</body>
</html>

■PHPの画像データダウンロード処理

PHP のプログラムの手順は以下の通りです

file_get_contents 関数でファイルを読込
読込データを base64_encode 関数でBASE64にエンコード
エンコード済みBASE64データと画像タイプを Ajax 用のデータとして準備
json_encode 関数で Ajax に送信

<?php
// ファイル
$file_name = './img1.jpg';  //仮に同一フォルダに「img1.jpg」の画像ファイルを置く
$type = 'image/jpeg';

// base64エンコード
$img = base64_encode(file_get_contents($file_name));
// Ajax応答データ
$list = array("img" => $img, "type" => $type);
// JSONデータを出力
echo json_encode($list);
exit();
?>

今回は HTML のページ読み込み時のタイミングで Ajax で画像を表示する処理を行いました。
手順としては回りくどい処理になっていますが、この方法を使えば別のタイミング、例えばあるボタンやリンクをクリックした時に画像を変更する場合には使えるのではと思います。

単にページに画像を表示するだけならば IMG タグで画像を指定すればできます。
以下にBASE64にエンコードしたデータを直接表示する場合を示します。

■PHPで画像データをBASE64にエンコードしたデータを直接表示

<?php
//ファイル
$file_name = './img1.jpg';
$type = 'image/jpeg';
// base64エンコード
$img = base64_encode(file_get_contents($file_name));
?>
<html>
<head>
<meta charset="utf-8">
<title>test image</title>
</head>
<body>
    <h2>test image</h2>
    <img width="100" src="data:<?php echo $type; ?>;base64,<?php echo $img; ?>" />
    <img width="100" src="<?php echo $file_name; ?>" />
</body>
</html>

VB.NET-TIPS などプログラミングについて

■Ajaxを使いPHPからの画像データをcanvasに表示

■PHPの画像データダウンロード処理

■PHPで画像データをBASE64にエンコードしたデータを直接表示

関連する記事

コメント