Q&A
jQueryで画像をトリミングしたいと考えています。見よう見真似でプログラムを作成したのですがトリミングした画像がどうしても出ないです。よろしければ、ご鞭撻のほどよろしくお願いします。
参考にしたURLを記載しておきます。
http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop
また、プログラムも記載しておきます。
jQuery('#cropbox').Jcrop({ aspectRatio: 1, onSelect: updateCoords });
});
function updateCoords(c)
{
jQuery('#x').val(c.x);
jQuery('#y').val(c.y);
jQuery('#w').val(c.w);
jQuery('#h').val(c.h);
};
</div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-5176876-1"); pageTracker._trackPageview(); </script> </body> </html></div>
これがphpです。
<?php /** * Jcrop image cropping plugin for jQuery * Example cropping script * @copyright 2008-2009 Kelly Hallman * More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html */ if ($_SERVER['REQUEST_METHOD'] == 'POST') { $targ_w = $targ_h = 150; $jpeg_quality = 90; $src = 'demo_files/pool.jpg'; $img_r = imagecreatefromjpeg($src); $dst_r = ImageCreateTrueColor( $targ_w, $targ_h ); imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'], $targ_w,$targ_h,$_POST['w'],$_POST['h']); header('Content-type: image/jpeg'); imagejpeg($dst_r,null,$jpeg_quality); exit; } // If not a POST request, display page below: ?><!DOCTYPE html> <html lang="en"> <head> <title>Live Cropping Demo</title> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <script src="../js/jquery.min.js"></script> <script src="../js/jquery.Jcrop.js"></script> <link rel="stylesheet" href="demo_files/main.css" type="text/css" /> <link rel="stylesheet" href="demo_files/demos.css" type="text/css" /> <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" /> <script type="text/javascript"> $(function(){ $('#cropbox').Jcrop({ aspectRatio: 1, onSelect: updateCoords }); }); function updateCoords(c) { $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); }; function checkCoords() { if (parseInt($('#w').val())) return true; alert('Please select a crop region then press submit.'); return false; }; </script> <style type="text/css"> #target { background-color: #ccc; width: 500px; height: 330px; font-size: 24px; display: block; } </style> </head> <body> <div class="container"> <div class="row"> <div class="span12"> <div class="jc-demo-box"> <div class="page-header"> <ul class="breadcrumb first"> <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li> <li><a href="../index.html">Demos</a> <span class="divider">/</span></li> <li class="active">Live Demo (Requires PHP)</li> </ul> <h1>Server-based Cropping Behavior</h1> </div></html><!-- This is the image we're attaching Jcrop to --> <img src="demo_files/pool.jpg" id="cropbox" /> <!-- This is the form that our event handler fills --> <form action="crop.php" method="post" onsubmit="return checkCoords();"> <input type="hidden" id="x" name="x" /> <input type="hidden" id="y" name="y" /> <input type="hidden" id="w" name="w" /> <input type="hidden" id="h" name="h" /> <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" /> </form> <p> <b>An example server-side crop script.</b> Hidden form values are set when a selection is made. If you press the <i>Crop Image</i> button, the form will be submitted and a 150x150 thumbnail will be dumped to the browser. Try it! </p> </div> </div> </div> </div> </body>
回答2件
0
ご質問のコードは参考にされたページのサンプルを未消化でただコピー&ペーストされているように見えます。
むやみにコピペしても、バグを見つけにくくなりますし勉強にもなりません。
自分なりにサンプルコードを１行づつ消化しながらキーボードで入力するようにしましょう。
サンプルページを参考に学習する時には、最小限のコードから始めて１段階づつ試してはコードを追加していきます。
今回の質問はどこから突っ込んでいいのか判らないので以下の点を直してみてください。
(1) JcropはサイトからZipファイルをダウンロードして解凍してテストフォルダ以下にjsフォルダをコピー。
(2) ヘッダーでコピーした.jsファイルを指定。
(jcrop_demos.jsは不要です)
HTML
1<script src="js/jquery.min.js"></script> 2<script src="js/jquery.Jcrop.min.js"></script>
(3) HTMLは不要な部分をそぎ落として最小限のコードのみにします。（下の例では40行未満です）
HTMLのヘッダー、javascriptコード、フォームのみにします。
(4) テストがWindows上の環境かもしれませんがHTMLやPHPのコードでは、フォルダ名とファイル名には日本語を使わない習慣を付けましょう。
原因不明のエラーの元になります。
サンプルのHTML ファイル名:test8.html (.htmlでPHPが動かない設定なら拡張子を.phpに変更します)
HTML
1<html> 2<head> 3<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4<title>Jcropテスト</title> 5<script type="text/javascript"></script> 6<script src="js/jquery.min.js"></script> 7<script src="js/jquery.Jcrop.min.js"></script> 8</head> 9<img src="../images/page000x16.jpg" id="cropbox" /> 10<script language="Javascript"> 11jQuery(function(){ 12 jQuery('#cropbox').Jcrop({ 13 aspectRatio: 1, 14 onSelect: updateCoords 15 }); 16}); 17function updateCoords(c) 18{ 19 jQuery('#x').val(c.x); 20 jQuery('#y').val(c.y); 21 jQuery('#w').val(c.w); 22 jQuery('#h').val(c.h); 23}; 24</script> 25<div class="jc_coords"> 26 <form action="test7.html" method="post" onsubmit="return checkCoords();"> 27 <input type="hidden" id="x" name="x" /> 28 <input type="hidden" id="y" name="y" /> 29 <input type="hidden" id="w" name="w" /> 30 <input type="hidden" id="h" name="h" /> 31 <input type="submit" value="切り抜き" style="float:left; width: 98px;" /> 32 </form> 33</div> 34</body> 35</html>
(5) PHP側のファイルでは、POSTされたデータは一度変数に格納して変数が受取れたか画面出力して確認します。
必ずPOSTされたデータが数字かどうか確認する習慣を付けましょう。
（公開した場合にあり得る不正なPOST対策です）
数字以外が入っていないかを確認するには以下の例では、is_num()という関数を作って0～9の半角文字列以外の文字列が含まれていないか確認して変数に格納しています。
(6) 数字が正常にPOSTされているのを確認したら数字出力のコードをコメントアウトします。
（以下のサンプルコードでは19～21行目）
(7) 切り出す座標の始点とサイズが正しいかチェックをする習慣を付けましょう。
23行目で始点（左上）の数字が正の値か、終点座標(右下)の値が画像のサイズを
超えていないかチェックしています。
(8) imagecopyresampled()の引数に $_POSTの値を入れずに上で代入した変数を使います。
※ PHPのコードには後で理解しやすいように日本語コメントを書いておく習慣を付けましょう。
サンプルのPHP ファイル名:test7.html (.htmlでPHPが動かない設定なら拡張子を.phpに変更します)
PHP
1<? 2 $src = '../images/page000x16.jpg';//画像ファイル名（任意の英語フォルダ名・ファイル名に書き換えてください） 3 if ( !file_exists( $src ) ) { //ファイルがあるかチェックする 4 print "画像ファイルが存在しません。"; 5 exit; 6 } else { 7 //画像のサイズを取得する 8 list( $width, $height, $type, $attr ) = getimagesize( $src ); 9 } 10 if( !empty( $_POST ) ) { 11 $sx = $sy = $wx = $hy = 0;//座標の初期化 12 //POSTされていて数値の場合に変数に代入 13 if( !empty( $_POST['x'] ) ) { if( is_num( $_POST['x'] ) ) { $sx = $_POST['x']; } }; 14 if( !empty( $_POST['y'] ) ) { if( is_num( $_POST['y'] ) ) { $sy = $_POST['y']; } }; 15 if( !empty( $_POST['w'] ) ) { if( is_num( $_POST['w'] ) ) { $wx = $_POST['w']; } }; 16 if( !empty( $_POST['h'] ) ) { if( is_num( $_POST['h'] ) ) { $hy = $_POST['h']; } }; 17 18 //POSTされた内容などを出力して確認（一度確認したら以下３行はコメントアウトします） 19 print "画像のサイズ 幅：" . $width . " 高さ：" . $height; 20 print "切り取り sx=" . $sx . " sy=" . $sy . " wx=" . $wx . " hy=" . $hy; 21 exit; 22 //座標値のチェック結果が正常なら画像を出力する 23 //切り出し範囲の始点座標（左上）が正の値か、終点座標（右下）が画像の範囲内かチェック 24 if( $sx>=0 && $sy>=0 && $wx>0 && $hy>0 && ($sx+$wx)<=$width && ($sy+$hy)<=$height ) { 25 $targ_w = $targ_h = 150; //コピー先の幅と高さ（正方形） 26 $jpeg_quality = 90;//jpeg保存画質 27 28 $img_r = imagecreatefromjpeg( $src ); 29 $dst_r = ImageCreateTrueColor( $targ_w, $targ_h ); 30 31 imagecopyresampled( $dst_r, $img_r, 0, 0, $sx, $sy, 32 $targ_w, $targ_h, $wx, $hy); 33 //画像を出力 34 header( 'Content-type: image/jpeg' ); 35 imagejpeg( $dst_r,null, $jpeg_quality ); 36 exit; 37 } else { 38 //数値にエラーがあった場合 39 print "Input Error<br>\n"; 40 print_r( $_POST ); 41 } 42 } 43 //数字かチェックする関数 44 //0～9の数字だけならtrueを返す 45 function is_num( $str ) { 46 if( strlen( $str )<=0 )return false; 47 if( preg_match("/[^0-9]/", $str ) ) { 48 return false; 49 } else { 50 return true; 51 } 52 } 53?>TestPage
あとマナーとしてGoogleのGoogle アナリティクス（Web解析とレポート)のコードは削っておきましょう。
なおソースコードは選択してから質問欄のエディタの</>をクリックして見やすくしてくださいね。
動作確認: Windows7 Firefox 44.0 / Wadax WX共用サーバー
CentOS 6 / Apache 2.2 / PHP 5.3.3 モジュール版
投稿2016/02/16 04:54
総合スコア241
0
ベストアンサー
HTML
1<form action="/ゲーム/stage.html" method="post" onsubmit="return checkCoords();"> 2... 3</form>
Form の送信先が "/ゲーム/stage.html" となっておりますが、この送信先は正しいのでしょうか？
(該当のURLにアクセスすると、ご自身が設置したPHPが実行されるようになっているのでしょうか？）
なお、PHPファイルは、PHPが実行可能なWEBサーバー上に配置されている必要がございます。
（単純にファイルを設置しただけでは動かない可能性がありますよー）
投稿2016/02/16 04:00
総合スコア397
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。