###実現したいこと・前提条件

画像データを販売するサイトを作成している
phpで画像に透かし（ウォータマーク）を入れたサンプルデータを表示したい
商品ページ毎に合成する画像を記事別に動的に変えたい
最終的にそのサンプルデータをインラインイメージとして任意の場所に出力したい

2枚の画像を合成してウォーターマーク有のデータを作成することはできたのですが、
これをどうやって任意の場所に出力すればいいのかがわかりません。

###画面該当箇所のコード

php
1<?php
2$stamp = imagecreatefrompng( 'watermark.png' );
3$im = imagecreatefromjpeg( 'hanbai_data.jpg' );
4
5
6// スタンプの余白を設定し、スタンプ画像の幅と高さを取得します
7$marge_right = 10;
8$marge_bottom = 10;
9$sx = imagesx( $stamp );
10$sy = imagesy( $stamp );
11
12// スタンプ画像を写真の上にコピーします。余白の値と
13// 写真の幅を元にスタンプの位置を決定します
14imagecopy( $im, $stamp, imagesx( $im ) - $sx - $marge_right, imagesy( $im ) - $sy - $marge_bottom, 0, 0, imagesx( $stamp ), imagesy( $stamp ) );
15
16// 出力し、メモリを開放します
17header( 'Content-type: image/png' );
18imagepng( $im );
19imagedestroy( $im );
20?>

↓上記のコードだけを記載したphpファイルを開いた結果

↓出力結果のコード

php
1<html>
2<head>
3<meta name="viewport" content="width=device-width, minimum-scale=0.1">
4<title>watermark.php (640×480)</title>
5</head>
6<body style="margin: 0px; background: #0e0e0e;">
7<img style="-webkit-user-select: none;margin: auto;" src="https://【ドメイン】/test01/wp-content/themes/storefront-child/コードを記載したphpファイル名.php" width="640" height="480">
8</body>
9</html>
10

↑そもそもなぜimgタグ内の画像パスが.php形式になるのかよくわからないです。

画像だけを任意の個所に出力したのに、ファイル全体が「合成後の画像データ」みたいな感じになってしまいます。

###試したこと
例えば、サーバー上にすでに存在する画像をbase64エンコードして出力するだけであれば下記の方法でできました。

php
1<?php
2$img = base64_encode(file_get_contents('画像ファイルのパス'));
3?>
4<img src="data:image/png;base64,<?php echo $img; ?>">

これと組み合わせて透かし有のデータを好きな場所に出力すればできるのではないかと考えているのですが、
どうすればいいのかわかりません。

知恵を貸していただけないでしょうか。

###参考にしたサイト

透かしを入れるための画像合成
→https://www.php.net/manual/ja/image.examples-watermark.php

base64エンコード
→https://kaworu.jpn.org/kaworu/2008-04-06-1.php

###追記1
表示したいページのbodyタグ内に「画面該当箇所のコード」を貼り付けると、もともと書かれていたhtmlはすべて無視されて下記のようになります。

（右上のウィンドウはキャプチャソフトの画面なので無視してください）

###追記2
chromeのディベロッパーモードでどんなhtmlが吐き出されているのか確認しました。
出力結果のコード

html
1<body style="margin: 0px; background: #0e0e0e;">
2<img style="-webkit-user-select: none;margin: auto;" src="https://ドメイン/test01/product/1068/">
3</body>

bodyタグ内でいうとこれだけしか表示されません。
エラーらしきものはこの中からは見つけられませんでした。

miyabi_pudding

2020/03/08 13:11

> 画像だけを任意の個所に出力したのに、ファイル全体が「合成後の画像データ」みたいな感じになってしまいます。を解決したいのでしょうか？それとも、合成画像をサーバーのどこかに保存したいのでしょうか？

bokupiroki

2020/03/08 18:24

前者です。最終的にイメージタグで任意の場所に出力したいです。

miyabi_pudding

2020/03/09 00:45

わかりました。回答させていただきました。

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

回答1件

ベストアンサー

PHPが、「私はPNG画像ですよ」とレスポンスを返してるからです。
なので、現状で大丈夫です。
ブラウザ側は、「あ、PNG画像だ」と認識してくれてます。

そこは、http通信の仕組みなどの話になってきますので、長くなるので割愛しますが、
簡単に言うと、PHPなどのサーバーサイドテクノロジーは、如何様なファイルとしても振る舞う事が可能なので、
（HTMLだろうが、JavaScriptだろうが。
但し、動画などに関してはかなり話が変わってくる）
現状のコードでなんの問題もなく、PNG画像として扱われています。

追記2に対して

imgに対して当てているのは、WordPressの記事ページでしょうか？
それではダメです。
なぜなら、それは普通のPHPを返しているからです。
（おそらく）

なぜ、watermark.phpが、PNG画像として認識されるかというと、

php
1header( 'Content-type: image/png' );

を実行しているからです。
これにより、httpヘッダーにて、PNG画像として認識させています。

コメントに寄せていただいた、合成画像を動的に、ということを実現するなら、
下記のようになりますかね・・・。

php
1// watermark.php
2<?php
3$stamp = imagecreatefrompng( 'watermark.png' );
4// 下記を、URLパラメータから画像パスを取得できるようにする
5// $im = imagecreatefromjpeg( 'motogazou.jpg' );
6$imagePath = isset($_GET["imagePath"]) ? $_GET["imagePath"] : 'motogazou.jpg';
7$im = imagecreatefromjpeg( $imagePath );
8
9// スタンプの余白を設定し、スタンプ画像の幅と高さを取得します
10$marge_right = 10;
11$marge_bottom = 10;
12$sx = imagesx( $stamp );
13$sy = imagesy( $stamp );
14
15// スタンプ画像を写真の上にコピーします。余白の値と
16// 写真の幅を元にスタンプの位置を決定します
17imagecopy( $im, $stamp, imagesx( $im ) - $sx - $marge_right, imagesy( $im ) - $sy - $marge_bottom, 0, 0, imagesx( $stamp ), imagesy( $stamp ) );
18
19// 出力し、メモリを開放します
20header( 'Content-type: image/png' );
21imagepng( $im );
22imagedestroy( $im );
23?>

んで、imgのパスの書き方は下記です。

php
1<html>
2<head>
3<meta name="viewport" content="width=device-width, minimum-scale=0.1">
4<title>watermark.php (640×480)</title>
5</head>
6<body style="margin: 0px; background: #0e0e0e;">
7<img style="-webkit-user-select: none;margin: auto;" src="https://【ドメイン】/test01/wp-content/themes/storefront-child/watermark.php?imagePath=【画像のURLかパス】" width="640" height="480">
8</body>
9</html>

ようは、watermark.phpに対して、合成したい画像のパスをURLパラメータを渡し、
watermark.phpでは、その画像パスを使って処理をするように変えたって感じです。

ただし、imagecreatefromjpegメソッドが何をしているかは全くわからないので、このままで動くとは限りません。
なので、この先は、質問者さん自身でいろいろやっていただかないとわかりませんので、
これ以上の回答は、imagecreatefromjpegが何を処理しているか、など、全ての情報を開示していただかないとできません。

投稿2020/03/09 00:45

編集2020/03/09 06:25

miyabi_pudding

総合スコア9555

bokupiroki

2020/03/09 02:49

ありがとうございます。そのまま表示したいファイルの任意の場所にphpコードを貼りつけた結果を質問に追記しました。ただ貼り付けただけではうまくいきませんでした。

miyabi_pudding

2020/03/09 03:25 編集

何かエラーが出ていませんか？ソースコード上で。また、エラーがでた時のHTML（PHP）のコードも記載して下さい。

bokupiroki

2020/03/09 04:34

追記しました。

miyabi_pudding

2020/03/09 05:53

え、、、 https://【ドメイン】/test01/wp-content/themes/storefront-child/watermark.php はどこいったんですか？ https://ドメイン/test01/product/1068/ はなんのページなんですか？何がしたいのか余計わからなくなってます。

miyabi_pudding

2020/03/09 05:58 編集

つまり、 watermark.phpで定義されている固定の画像の合成ではなく、合成する画像を記事別に動的に変えたい、ということですか？？（imgに入れているURLが記事ページぽかったので）

bokupiroki

2020/03/09 06:07

「watermark.phpで定義されている固定の画像の合成ではなく、合成する画像を記事別に動的に変えたい、ということですか？？」 →その通りです。言葉足らずで申し訳ありません。

miyabi_pudding

2020/03/09 06:10

あーーーーーそれは書いてもらわないと、第三者にはわかりません。度々ですみませんが、その旨を質問文に記載ください。参考ページに、合成画像を動的に変える方法など記載ありませんか？

bokupiroki

2020/03/10 01:11

回答ありがとうございます。「合成画像を動的に変える方法」は参考サイトに記載されていませんでしたが、 watermark.phpに画像を用意しておいて、 <img src="https://【ドメイン】/test01/wp-content/themes/storefront-child/watermark.php"> で静的に画像を表示できるところまでは確認が取れました。回答の内容と合わせて、引き続きチャレンジします。

bokupiroki

2020/03/11 03:14

できました！ありがとうございます。本当に助かりました。 <img style="-webkit-user-select: none;margin: auto;" src="https://【ドメイン】/test01/wp-content/themes/storefront-child/watermark.php?imagePath=<?php echo $motogazou ; ?>" width="640" height="480"> （$motogazouは動的に画像のパスをはめ込む変数）

miyabi_pudding

2020/03/11 06:00

解決できてよかったです！

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