###前提・実現したいこと
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
html
1<!-- boot_test/index.html --> 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>Bootstrap 101 Template</title> 9<!-- Bootstrap --> 10 <link href="css/bootstrap.min.css" rel="stylesheet"> 11<!-- CSS --> 12<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.css" rel="stylesheet" type="text/css" media="all"/> 13<!-- JS --> 14<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 15<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.js"></script> 16<!--[if lt IE 9]> 17<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 18<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 19<![endif]--> 20</head> 21<body> 22 <h3><i class="fa fa-crop"></i> cropperのデモ </h3> 23 <!-- 切り抜きボタン --> 24 <a id="getData" class="btn btn-primary">Get Data</a><br><br> 25 26 <div class="cropper-example-1"> 27 <!-- bladeテンプレートを使用していれば asset()や url() 関数が使えます --> 28 <img id="img" class="img-responsive" src="./img/art.jpg" alt=""> 29 </div> 30 31 <script type="text/javascript"> 32 // init 33 // class='cropper-example-1のimgタグに適用' 34 var $image = $('.cropper-example-1 > img'),replaced; 35 36 //crop options 37 // id='imgに適用' 38 $('#img').cropper({ 39 aspectRatio: 4 / 4 // ここでアスペクト比の調整 ワイド画面にしたい場合は 16 / 9 40 }); 41 42 $('#getData').on('click', function(){ 43 alert('こんにちは!'); 44 // crop のデータを取得 45 var data = $('#img').cropper('getData'); 46 // 切り抜きした画像のデータ 47 // このデータを元にして画像の切り抜きが行われます 48 var image = { 49 width: Math.round(data.width), 50 height: Math.round(data.height), 51 x: Math.round(data.x), 52 y: Math.round(data.y), 53 _token: 'jf89ajtr234534829057835wjLA-SF_d8Z' // csrf用 54 }; 55 // post 処理 56 $.post('/cropper', image, function(res){ 57 // 成功すれば trueと表示されます 58 console.log(res); 59 }); 60 }); 61 62 </script> 63 64 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 65 <script src="js/bootstrap.min.js"></script> 66 67</body> 68</html> 69
javascript
1// app/routes.php 2 3use Illuminate\Http\Request; 4use Intervention\Image\ImageManagerStatic as Image; 5 6$app->post('/cropper', function(Request $request){ 7 8 $str = str_random(7); 9 10 $crop = value(function() use ($request, $str) { 11 12 // Laravelの場合は public_path()ヘルパー関数、Facadeが使えます 13 $image = Image::make('../public/img/art.jpg') 14 ->crop( 15 $request->get('width'), 16 $request->get('height'), 17 $request->get('x'), 18 $request->get('y') 19 ) 20 ->resize(256,256) // 256 * 256にリサイズ 21 // 画像の保存 22 ->save('../public/img/'. $str . '.jpg') 23 ->resize(128,128) //サムネイル用にリサイズ 24 ->save('../public/img/'. $str . '_t' . '.jpg'); 25 26 // 必要があれば元のファイルも消す 27 /* Lumenの場合は bootstrap/app.phpに以下のコードを追加 28 * class_alias('Illuminate\Support\Facades\File', 'File'); 29 */ 30 // \File::delete('Your image File); 31 32 return $image ?: false; 33 34 }); 35 36 return $crop ? ['response' => true, 'img' => $str . '.jpg'] 37 : ['response' => false]; 38 39}); 40
回答1件
あなたの回答
tips
プレビュー