GDを使って画像の背景を透過させる方法と注意点

このQ&Aのポイント
  • 画像の背景を透過させるためにはimagecolortransparent関数を使用します。
  • 複数色を透過させることはできませんが、透過色を指定することで一部の色を透明にすることが可能です。
  • また、透過処理を複数回行うことで、より自然な透明背景を実現することができます。
回答を見る
  • ベストアンサー

GDを使って画像の背景を透過させたい

画像の背景を透過させたいと思い下記コードを実行してみたのですが、期待通りの状態になりませんでした。(体の周りに白が残ってしまう) $src = 'http://ec2.images-amazon.com/images/I/41VI47EYcaL.jpg'; $img = imagecreatefromjpeg($src); $color = imagecolorallocate($img, 255, 255, 255); imagecolortransparent($img, $color); imagepng($img); imagedestroy($img); そこで、255, 255, 255だけではなく250, 250, 250くらいも透過してみようと思い $color = imagecolorallocate($img, 255, 255, 255); imagecolortransparent($img, $color); $color = imagecolorallocate($img, 250, 250, 250); imagecolortransparent($img, $color); と、透過処理を二回続けてみました。すると、最初の状態よりも透過が上手く行われていない結果となってしまいました。 複数色を透過処理することはできないのでしょうか。 imagealphablending, imagesavealphaや、透過するごとに画像を保存して読み込んで…ということをしてみたのですがそれもやはり同じような結果でした。 255~250くらいまで、複数色を透過したとしても綺麗に背景だけ透過されるという結果は得られないかもしれませんが、もしよろしければ複数色の透過を行うコードを教えて頂ければ幸いです。 複数色を透過させる方法、もしくは他の方法でも良いので綺麗に背景だけ透過させる方法がありましたら教えて下さい。 宜しくお願い致します。

  • PHP
  • 回答数2
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

ざっと白っぽいjpegを透過pngにする方法です 元画像はwikipediaにあった雲の画像を適当に <?PHP $imgname="hogehoge.jpg"; $im = imagecreatefromjpeg($imgname); //$im = imagecreatefrompng($imgname); //pngから読むならこれ $background = imagecolorallocate($im, 255, 0, 0); //とりあえず真っ赤を背景に list($width, $height) = getimagesize($imgname); for($i=0;$i<$width;$i++){ for($j=0;$j<$height;$j++){ $rgb = imagecolorat($im, $i,$j); $r = ($rgb >> 16) & 0xFF; $g = ($rgb >> 8) & 0xFF; $b = $rgb & 0xFF; if($r>200 and $g>200 and $b>200) imagefill($im, $i, $j, $background); } } imagecolortransparent($im, $background); header('Content-Type: image/png'); imagepng($im); imagedestroy($im); ?>

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

どうせ透過するなら複数色である必要はないのでは? (なぜなら結局みえないのだから) 同じ色に変更した上で透過設定してみては?

jimascript
質問者

補足

回答有り難うございます。 同じ色に変更ということですが、調べてみたところimagefilltoborderという関数が見つかりました。 ですが、この関数を使って上手く白っぽい背景を全て255, 255, 255にすることはできるのでしょうか。もしよろしければ変更をするための方法を大まかにでも良いのでご教授願えないでしょうか。 宜しくお願い致します。

関連するQ&A

  • GD(php)での image関数 イメージ関数でブラウザ出力が出来ない

    下記ソースのimage.phpというファイルを作りました。 直接http://url/image.phpでアクセスすると画像が表示されません。 <? header("Content-Type: image/png"); $image = imagecreate(120,120); $black = imagecolorallocate($image,0,0,128); $yellow = imagecolorallocate($image,255,255,0); imageline($image,10, 60, 110, 60, $yellow); imagepng($image); imagedestroy($image); ?> imagepng($image);を imagepng($image,"test.png"); に変えたら、正しく同フォルダーにtest.pngが出力され、こちらは問題ないファイルとなっています。今回の処理ではphpを画像ファイルとして扱いたいのですが、 このケースで考えられる原因教えてください。 参考までにtest.htmlに <html><head><title>test</title> <img src="image.php"></body></html> と書いても結果は同じく画像表示が出来ませんでした。 <html><head><title>test</title> <img src="test.png"></body></html> では表示出来ます。

    • 締切済み
    • PHP
  • PHPで行う最速の画像合成を教えて下さい。

    PHPを使用して、画質をあまり落とさず、1秒以下の処理時間で23個の画像を合成する方法(ロジック)を教えて下さい。 画像の合成をPHPで下記のソースのように組みましたが、横1120×縦2016のPNGファイル(容量は1ファイル当たり約 6.6KB~140KB)を23個合成して一つのファイルにする処理が終了すると、結果として合成された画質はキレイ(10段階中10の画質)ですが、処理時間が5.5秒程かかります。 そこで、合成素材の23個のファイルを全て半分の大きさ横560×縦1008にすると、結果として合成された画像の画質は結構落ちました(10段階中6の画質)が、処理時間は2.5秒程で終わりました。 希望としては、画質をあまり落としたくないので、小さくても横560×縦1008の画像を23個合成して処理時間を1秒以下にしたいのですが、以下のソースのやり方よりも処理が早く終わる やり方をご存知の方はいませんか? ご存知の方は、ご教授願います。 ちなみに、画像の種類は、使用できる色の種類が多いPNG形式で1秒以下の処理時間を実現したいです。 宜しくお願い致しますm(__)m ■環境 windows vista xampp/apache 2.2.4 PHP Version 5.2.3 //23個のファイルをロード $img1 = imagecreatefrompng(一個目のファイル); $img2 = imagecreatefrompng(二個目のファイル); ~ $img23 = imagecreatefrompng(23個目のファイル); //(白)の色を作成 $white1 = imagecolorallocate($img1, 255, 255, 255); $white2 = imagecolorallocate($img2, 255, 255, 255); ~ $white23 = imagecolorallocate($img23, 255, 255, 255); //白色を透過色へ imagecolortransparent($img1, $white1); imagecolortransparent($img2, $white2); ~ imagecolortransparent($img23, $white23); //それらをひとつの画像に統合($img1を背景とすると。) imagecopymerge($img1, $img2, 0, 0, 0, 0, 1120, 2016, 100); imagecopymerge($img1, $img3, 0, 0, 0, 0, 1120, 2016, 100); ~ imagecopymerge($img1, $img23, 0, 0, 0, 0, 1120, 2016, 100); //マージした後いらなくなった画像リソースをとりあえず解放 imagedestroy($img2); ~ imagedestroy($img23); imagepng($img1,出力ファイル名); imagedestroy($img1);

    • ベストアンサー
    • PHP
  • テーブル背景のpng画像を透過したい

    テーブルの背景に透過部分を含んだpng画像を設定して、その上に文字を載せたいと考えています。簡略化した現在のタグは以下です。  <table>   <tr>   <td background="(png画像URL)">    ここに文字   </td>   </tr>  </table> 通常だとこれで良いのですが、このpng画像は透過部分を含んでいます。(ちなみにpng-24です) WindowsのIE7.0だと正常に透過されるのですが、IE6.0や他のブラウザですと透過部分が青白く浮かび上がってしまいます。 私はIE6.0でも透過されるように表示させたいのです。 欲を言うと、MacのSafariでも透過させたいです。 一方、テーブルの背景に設定していない、普通の画像ですと<img src="">タグを使っているのでCSSを利用して、 <スタイルシート指定部分> .ail { filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.firstChild.src + ", sizingMethod=scale)"); width: expression(this.firstChild.clientWidth+"px"); height: expression(this.firstChild.clientHeight+"px"); } .ail img { visibility: expression("hidden"); } </スタイルシート指定部分> <画像部分>  <span class="ail">  <img src="(png画像URL)">  </span> </画像部分> で透過しているのですが、テーブルの背景に指定した画像では、このタグは使えません。 他にも色々な方法を検索したのですが有効なものが見つからず、、、 そもそも、テーブルの背景に指定したpng画像は透過できないものなんでしょうか…?というところまで考えてしまいます。 もし方法があれば教えて欲しいですが、HTMLで実現不可能な範囲なのならばそれも指摘して欲しいです。 この部分だけクリアできれば、Webサイトも完成します。 切実に宜しくお願いします。

  • こんばんわ

    こんばんわ 今とても困っています。 その内容は、 「PHPのGDを使って透過PNGを減色させる」といった処理なのですが、 減色関数?のimageTrueColorToPalette()を使って処理を行っても、透過が 保持されず、添付画像のようになってしまいます。 作成したコードは以下になります。 $pngimg="./ff-logo-big.png"; $resource = imageCreateFromPng($pngimg); echo "<img src = './befor.png'><br>"; imagetruecolortopalette($resource,false,255); imagepng($resource , "./after.png"); imagedestroy($resource); echo "<img src = './after.png'><br>"; どうすれば透過を保持したまま減色する事ができるのか、教えて 頂けたら光栄です。そもそもphpのGDを使ってというのは無理なの でしょうか? 他の言語を含め、何か方法があれば教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • PHP+GDについて

    PHPでGDを用いてPNGファイルを生成するスクリプトを作成したのですが、うまく動作しません。 <?php $filename = "G".date("Ymdhis").".png"; $im = imagecreate(550, 250) or die ("画像の作成に失敗しました"); $bg = imagecolorallocate($im, 255,255,255); $trans = imagecolortransparent($im, $bg); imageline($im, 60,0,60,140, $trans); $filedir="graph_img/".$filename; imagepng ($im,$filedir); imagedestroy($im); echo "作成完了!"; ?> このスクリプトを実行すると、PNGファイルは生成されるんですが、ファイルサイズが0で、スクリプトの実行がそこで中断されてしまいます。 何かよい解決方法はないでしょうか?よろしくお願いいたします。

    • 締切済み
    • PHP
  • 透過して画像を背景に貼り付ける方法

    背景に写真を切り抜いた画像を貼り付けてHPにUPしたいと思っていますが、自分で色々やってみましたが出来ません。 jpgの背景画像にjpgの写真(綺麗に形を切り抜いた物)を合成はできるのですが、 切り抜いた画像の周りを透過させて、別の背景に貼り付けて、合成したいのです。 透過させると、gifかpngで保存ですよね。でその画像を背景と合成させるのができません。背景にそれを貼り付け、コピーなどすると、透過できなくて、画像の周りに四角く枠ができます。画像編集ソフトで、gifが読み込めません。でpngに変更して、保存すると透過出来なくて! 困っています。最初から素材でpng透過してある物も、出来ません。ソフトはwinxpに標準でついているもの(フォトレタッチとビルダーv6.5ライト)意外はIrfan とPict Bear(ペイントソフト)のようなものしかありません。 あまり、画像処理ソフトの使い方が分からずにいます 上記のフリーソフトも使いこなせずにいる、初心者です。 良い方法があったら教えてください 市販のソフトでないと、このような事は出来ないのですか。 どうぞ宜しくお願いいたします 説明が分かりづらくてすいません

  • [携帯]divで指定した背景色から画像がはみ出す。

    携帯用サイトを制作しているのですが、 <div style="clear:both;background-color:red;">    <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" />    <br />こんにちは </div> <div style="clear:both;~ と画像の横に文字が回りこんだとき、背景色が文字の部分にしかつかず、画像がはみ出した状態になってしまいます。 今回は1*1の透明なgif画像を使い、 <div style="clear:both;background-color:red;">    <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" />    <br />こんにちは       <div clear="all" style="clear:both;">          <img src="./images/space.gif">       </div> </div> <div style="clear:both;~ とすることで解消できたのですが、 参考にしていたサイトではどうやら画像を使わずに背景内に収めているようです。 後学のために、画像を使わず、背景から画像をはみ出さないように見せる方法を教えてください。よろしくお願いします。 docomoで動作確認しています。

  • 画像に背景色と境界線を付けたい。

    いつもお世話になります。 画像の周りに背景色その外側に線を引きたく思っています。 (1) <div style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > <img src="**.jpg" alt="**"> </div> と、すれば可能ですが (2) <img src="**.jpg" alt="**" style="border:solid 5px gray;padding:20px;background-color:lightcyan;" > とすると境界線は表示されても背景色が表示されません。 (1)のように<div>タグを用いなくて、(2)のように<img>タグのみで(1)のようなことはできないものでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • レイヤーを背景だけ透過させたい

    お世話になります。 レイヤーを背景だけ透過させたく、質問させていただきます。 レイヤーを透過させたい場合、よくスタイルシートのfilterが使われると思います。 たとえば <div style="width:100; height:20; color:#ff0000; background-color:#0000ff; filter:Alpha(opacity=60);"> フィルター適応</div> のようにすると、レイヤー全体が透過されます。 しかし、今回やりたいのは、背景のみが透過し、文字は透過させたくありません。 1つ考えた方法として、 <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; background-color:#0000ff; filter:Alpha(opacity=60);"> </div> <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; color:#ff0000;"> フィルター適応 </div> のように、無理やりレイヤーを2つ重ねて表示できないこともないのですが、もっとスマートな方法はないでしょうか。 ご存知の方がいらっしゃいましたら、ご教授お願いいたします。

    • ベストアンサー
    • HTML
  • CSSでリンクテキストの背景色を透過させたい

    こんにちは。 検索してみたのですが、「背景色をつける」方法は数あれど、「透過させる」 方法は見つかりませんでしたので質問します。 ボックスの背景に青色グラデーションがかかっています。 このボックスの中に書いたテキストの一部に、リンクを貼りました。 ブラウザで確認すると、リンクテキスト部分の背景だけ、白くなっています。 通常のリンクは a{ text-decoration: underline; color: #333399;} a:link{ text-decoration: underline; color: #333399;} a:visited{ text-decoration: underline; color: #333399;} a:active{ text-decoration: underline; color: #333399;} a:hover{ text-decoration: underline; color: #99ccff;} と指定してますので、テキストリンクはオンマウス時だけテキスト色が 変わるようになっています。で、これを強引に透過できないか?と思い a{ text-decoration: underline; color: #333399; background-image: url("../img/spacer.gif");} a:link{ text-decoration: underline; color: #333399; background-image: url("../img/spacer.gif");} a:visited{ text-decoration: underline; color: #333399; background-image: url("../img/spacer.gif");} a:active{ text-decoration: underline; color: #333399; background-image: url("../img/spacer.gif");} a:hover{ text-decoration: underline; color: #99ccff; background-image: url("../img/spacer.gif");} ↑などということをやってみましたが、効果はありませんでした。 できる・できない、どちらでも構いませんので、ご存知の方がいらっしゃいましたらご教授願います。

専門家に質問してみよう