base64を使った画像取得の方法がうまくいきません。

画像をbase64にエンコードしてデータベースに保存するまでは恐らくできたと思うのですがそれを呼び出す際の処理がよくわかりません。

base64は64種類の文字列に置き換えて画像はサイトに埋め込むという理解でよろしいでしょうか。

そう仮定して以下のことをお聞きしたいです。

①base64に置き換えた時に中身をechoするとdata:image/png;base64,udjfajdみたい文字列になっていますがこれも大丈夫でしょうか。

②base64に置き換えた文字列から画像を呼び出す際の処理は一旦別ページにheader("Content-Type: image/jpeg");で画像を出力してからecho "<img src="....">で引っ張てくる方法でしょうか。

試してみたのですがうまくいかず、単純な見落としで表示できていないかのか、重要な記述が抜けたり、間違ったりしているのかがわからない状態です。

よろしくお願いします。


【投稿.php】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			function changeBase64(imageFile) {
				if (!imageFile.files.length) return;

				var file = imageFile.files[0];
				var fr = new FileReader();

				fr.onload = function(evt) {
					document.getElementById("image").src = evt.target.result;
					document.getElementById("imagedata").value = evt.target.result;
				}

				fr.readAsDataURL(file);
			}
	    </script>
	</head>
    <body>
		<form method="POST" action="xxx.php">
			<img id="image" src="" alt="画像">
			<input type="hidden" name="imagedata" id="imagedata">
			<input type="file" accept="image/jpg,image/gif,image/png" onchange="changeBase64(this)">
			<input type="submit" value="確定">
		</form>
    </body>
</html>


【データベース送る.php】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ありがとう</title>
</head>
<body>
<h2>ありがとう</h2>
<a href="index.php">戻る</a>
<div class="content">
<?php
$image=$_REQUEST['imagedata'];

  insert_proc ($image);

// ------------------------------------------------------------------
//
// ------------------------------------------------------------------
function insert_proc ($image)
{
echo ('*** insert_proc *** start ***<br />');

$dsn = 'xxxx';
$user = 'xxx';
$password = 'xxx';

echo('image='. $image. '</br>');



date_default_timezone_set('Asia/Tokyo');
$date_mod = date ("Y-m-d");
	echo ('date_mod = ' . $date_mod . '<br />');

try {
	$pdo = new PDO($dsn,$user,$password);
} catch (PDOException $e) {
	exit('データベースに接続できませんでした。' . $e->getMessage());
}


$stmt = $pdo->query('SET NAMES utf8');
if (!$stmt) {
	$info = $pdo->errorInfo();
	exit($info[2]);
}

echo "*** check *** ppp ***<p />";


$sql="insert into xxx (imagedata)"
	 . "values ('" . $image. "')";



echo $sql . "\n";


	$stmt=$pdo->prepare ($sql);
  $stmt->execute ();



}
// ------------------------------------------------------------------
?>



</div>


</body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

まず設計として，表示する直前にBase64エンコードし，それ以外のタイミングでは生データのまま保持しておいたほうが都合がいいです．JavaScriptで無理して変換せず$_FILESで受け取るようにし，データベースにもvarcharやtextではなくblobで突っ込みましょう
PDOの書き方に色々と問題があります．SQLインジェクション脆弱性もあります．
<meta /> <br /> <hr />などはXHTMLの書き方なので， /の部分は消しましょう．
画像形式の縛り方ですが，JPEGに対応するのはimage/jpegです．しかしIEはどうやら誤って（？）image/jpgとしてしまうこともあるようなので，こちらも念のため入れています．
ロジックは頭に書いて，HTMLは後ろに書きましょう．

base64に置き換えた文字列から画像を呼び出す際の処理は一旦別ページにheader("Content-Type: image/jpeg");で画像を出力してからecho "<img src="....">で引っ張てくる方法でしょうか。

それでもいいですが，画像サイズが巨大でなければ data:image/png;base64,xxx のように埋め込むデータURIスキームのほうがいいと思います．

PHPでデータベースに接続するときのまとめ - Qiita (「初心者がやりがちなミス」の複数に該当しています)
ファイルアップロードの例外処理はこれぐらいしないと気が済まない - Qiita

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>アップロード</title>
    </head>
    <body>
        <form method="post" action="upload.php" enctype="multipart/form-data">
            <input type="file" name="image" accept="image/gif,image/jpeg,image/jpg,image/png">
            <input type="submit" value="確定">
        </form>
    </body>
</html>

<?php

try {
    
    if (!isset($_FILES['image']['error']) || !is_int($_FILES['image']['error'])) {
        throw new RuntimeException('パラメータが不正です', 400);
    }

    switch ($_FILES['image']['error']) {
        case UPLOAD_ERR_OK:
            break;
        case UPLOAD_ERR_NO_FILE:
            throw new RuntimeException('ファイルが選択されていません', 400);
        case UPLOAD_ERR_INI_SIZE:
        case UPLOAD_ERR_FORM_SIZE:
            throw new RuntimeException('ファイルサイズが大きすぎます', 413);
        default:
            throw new RuntimeException('その他のエラーが発生しました', 500);
    }

    $imagetype = mime_content_type($_FILES['image']['tmp_name']);
    $imagedata = file_get_contents($_FILES['image']['tmp_name']);

    if (!in_array($imagetype, ['image/gif', 'image/jpeg', 'image/png'], true)) {
        throw new RuntimeException('ファイル形式が不正です', 415);
    }
    
    $pdo = new PDO(
        'mysql:dbname=example;host=localhost;charset=utf8',
        'xxx',
        'yyy',
        [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        ]
    );
    
    $stmt = $pdo->prepare('INSERT INTO images(imagedata) VALUES(?)');
    $stmt->execute([$imagedata]);
    
} catch (RuntimeException $e) {
    
    header('Content-Type: text/plain; charset=UTF-8', true, $e->getCode() ?: 500);
    exit($e->getMessage());
    
}

?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>アップロード完了</title>
    </head>
    <body>
        <h1>アップロード完了しました</h1>
        <a href=".">戻る</a>
        <div class="content">
            <img src="data:<?=$imagetype?>;base64,<?=base64_encode($imagedata)?>">
        </div>
    </body>
</html>

投稿2016/10/13 15:49

編集2016/10/13 16:09

mpyw

総合スコア5223

退会済みユーザー

2016/10/14 05:40

コメントありがとうございます。最初はBLOBでデータベースに入れていたのですがこちらで質問した際に画像はデータベースに突っ込まないほうがいいとアドバイスがあったためbase64にする方法を試しています。 BLOBで入れて直前にエンコードする方法があるなんて知らなかったです。検索した限りだと一般的にはbase64に変換して…ばかりだったので。 http://qiita.com/mpyw/items/b00b72c5c95aac573b71の方何度か読ませていただいています。ロジックは頭に書くなどは本体の方ではやっていたのですが今回のサンプル版では怠っていました。すいません。 PDOの書き方は一番苦手なので今回のコード含めて出来る限り正しい書き方をもう一度読んでみます。

退会済みユーザー

2016/10/14 05:41

読んで→勉強してみます。

mpyw

2016/10/14 05:46

>> 最初はBLOBでデータベースに入れていたのですがこちらで質問した際に画像はデータベースに突っ込まないほうがいいとアドバイスがあったためbase64にする方法を試しています。あ，いや，理想は「ファイル名だけをデータベースに入れてバイナリはファイルとして保存しておく」ですね．もちろんバイナリをデータベースに突っ込んだほうが一元的な管理ができるなど有利な面も無くはないですが，コンテンツ配信のために頻繁にデータを取り出す場合には不利になってしまいますね．ただ1つ言えるのは，Base64エンコードしてテキストとしてデータベースに突っ込むのは，この両者のどちらにも劣る方法だということです．

退会済みユーザー

2016/10/14 06:01

なるほど。だとすると今試している方法は一旦保留にしてみます。その上で「ファイル名だけをデータベースに入れてバイナリはファイルとして保存しておく」方法とPDOの正しい書き方も再度挑戦してみます。この度は教えていただきありがとうございます。

行動規範の内容に同意します

画像ファイルを作成するのではなく、表示するhtmlに直接
<img src="data:image/png:base64,xxxxx..." />
と書けば表示されます。

投稿2016/10/14 04:13

katsuya141

総合スコア367

退会済みユーザー

2016/10/14 05:31

コメントありがとうございます。実は昨日<img src="data:image/png:base64,xxxxx..." /> で画像は出せたのですが何故か出せる画像と出せない画像があります。これは容量的な問題なのでしょうか。出せない画像はhttp://tomari.org/main/java/base64d.htmlのサイトでやってもぼやけたりします。

行動規範の内容に同意します

あなたの回答