前提・実現したいこと
phpを使ってホームページを更新するプログラムを作っているド素人です。
商品画像を登録する際に、任意のサイズになるよう切り取る機能を実装したいと考えており、jqueryの知識は一切ありませんが、cropper.jsと言うものを使い、下記の参考サイトにある機能だけで要件を満たす事ができそうなので挑戦しました。
■やりたい事
画像をアップロード
比率は固定でリサイズ
リサイズした画像を任意のフォルダに格納、またはdbに格納
参考サイト http://co.bsnws.net/article/50
このサイトを参考にやってみたのですが、ボタンアクションからtrueが返ってきません。
これは何が原因なのでしょうか。
試したこと
ボタンアクションの中にアラートを入れてみると反応はあったので、最後の処理が失敗しているため反応がないのではと思うのですが…
成功させるためにはどうしたらいいのかご教授くださいm(_ _)m
また、リサイズした画像をphpで表示する方法も教えて頂きたいです。
(他 .map ファイル4種)
bootstrap.css bootstrap.min.css
bootstrap-theme.css bootstrap-theme.min.css
----css{ bootstrap.js bootstrap.min.js npm.js
フォルダ構成 |
boot_test -------js { bootstrap.js bootstrap.min.js npm.js
|
----img
|
---app { routes.php
|
----fonts
<!-- boot_test/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.css" rel="stylesheet" type="text/css" media="all"/>
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h3><i class="fa fa-crop"></i> cropperのデモ </h3>
<!-- 切り抜きボタン -->
<a id="getData" class="btn btn-primary">Get Data</a><br><br>
<div class="cropper-example-1">
<!-- bladeテンプレートを使用していれば asset()や url() 関数が使えます -->
<img id="img" class="img-responsive" src="./img/art.jpg" alt="">
</div>
<script type="text/javascript">
// init
// class='cropper-example-1のimgタグに適用'
var $image = $('.cropper-example-1 > img'),replaced;
//crop options
// id='imgに適用'
$('#img').cropper({
aspectRatio: 4 / 4 // ここでアスペクト比の調整 ワイド画面にしたい場合は 16 / 9
});
$('#getData').on('click', function(){
alert('こんにちは!');
// crop のデータを取得
var data = $('#img').cropper('getData');
// 切り抜きした画像のデータ
// このデータを元にして画像の切り抜きが行われます
var image = {
width: Math.round(data.width),
height: Math.round(data.height),
x: Math.round(data.x),
y: Math.round(data.y),
_token: 'jf89ajtr234534829057835wjLA-SF_d8Z' // csrf用
};
// post 処理
$.post('/cropper', image, function(res){
// 成功すれば trueと表示されます
console.log(res);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>// app/routes.php
use Illuminate\Http\Request;
use Intervention\Image\ImageManagerStatic as Image;
$app->post('/cropper', function(Request $request){
$str = str_random(7);
$crop = value(function() use ($request, $str) {
// Laravelの場合は public_path()ヘルパー関数、Facadeが使えます
$image = Image::make('../public/img/art.jpg')
->crop(
$request->get('width'),
$request->get('height'),
$request->get('x'),
$request->get('y')
)
->resize(256,256) // 256 * 256にリサイズ
// 画像の保存
->save('../public/img/'. $str . '.jpg')
->resize(128,128) //サムネイル用にリサイズ
->save('../public/img/'. $str . '_t' . '.jpg');
// 必要があれば元のファイルも消す
/* Lumenの場合は bootstrap/app.phpに以下のコードを追加
* class_alias('Illuminate\Support\Facades\File', 'File');
*/
// \File::delete('Your image File);
return $image ?: false;
});
return $crop ? ['response' => true, 'img' => $str . '.jpg']
: ['response' => false];
});-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
参考にされている実装はPHPで画像サイズを変更していますが、cropper.js で画像自体をクロップ出来ます。Canvas で画像を操作するため煩雑ですが、その部分についての記事や情報はネットの海にたくさんあるので、がんばれば何とかなると思います。
【画像の縦横比を合わせてアップロードするまで - ボクココ】
http://www.bokukoko.info/entry/2016/03/26/画像の縦横比を合わせてアップロードするまで
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.12%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
koronatail
2017/01/13 10:06
afamさんが製作したコードを載せてください。
afam
2017/01/13 10:35
早速見ていただきありがとうございます。不慣れなため、見難いようでしたら修正します。
koronatail
2017/01/13 12:41
routes.phpに<script>タグが含まれていますがただのコピペミスでしょうか。気が付かなかったのですがLaravelを使用しているのですね・・・。Laravelのタグ追加したほうがいいと思います。Laravel触ったこと無いので回答できなくて申し訳ないです。
afam
2017/01/13 20:22
ご意見ありがとうございます。<script>タグは色々試し、私が最後にダメ元で追加して消し忘れたものでした。早速削除させていただきます。仰る通りLaravelを使用しているようですが私も使った事がなくこの有様です(･･;)ご意見をいただき大変ありがたく思います。もしLaravelを使わずに必要な機能を実装するとしたらどんな方法がありますでしょうか？教えていただけると幸いです。