Q&A
trimmingImage関数の呼び出し箇所も提示されてはいかがでしょう。
前提・実現したいこと
質問できるレベルの知識ではないとは思いますがどなたか力を貸していただければ幸いです。
１.cropper用モーダルを立ち上げる
↓
２.ファイルを選択し、トリミングを行う
↓
３.切り取りボタンで選択された範囲をトリミング
↓
４.画像登録ボタンでDBに画像を登録し、モーダルを閉じる
発生している問題・エラーメッセージ
再度モーダルを立ち上げた際、canvasに前回の画像（切り取り前の）が残り続けてしまっている
エラーメッセージ
なし
該当のソースコード
JavaScript部分
＝＝＝ここから＝＝＝
JavaScript
1function trimmingImage(ls_obj) { 2 var ls_obj = $(ls_obj); 3 var canvas = $("#canvas"); 4 var context = canvas.get(0).getContext("2d"); 5 var $result = $('#result'); 6 var img = new Image(); 7 8 /*スライドの番号を取得*/ 9 const dataSlide = ls_obj.attr('data-slide-to'); 10 11 $result.empty(); 12 canvas.cropper('destroy'); 13 14 img.onload = function() { 15 context.canvas.height = img.height; 16 context.canvas.width = img.width; 17 context.drawImage(img, 0, 0); 18 } 19 20 $('#basicExampleModal20').attr('dataSlide',dataSlide).modal('show'); 21 22 $('#fileInput').on( 'change', function(){ 23 if (this.files && this.files[0]) { 24 if ( this.files[0].type.match(/^image//) ) { 25 var reader = new FileReader(); 26 reader.onload = function(evt) { 27 /*画像ファイルを読み込む時に前の画像をリセット*/ 28 $result.empty(); 29 canvas.cropper('destroy'); 30 var img = new Image(); 31 /*画像を読み込んだ後に実行する*/ 32 img.onload = function() { 33 context.canvas.height = img.height; 34 context.canvas.width = img.width; 35 context.drawImage(img, 0, 0); 36 canvas.cropper({ 37 aspectRatio: 1 / 1 38 }); 39 40 /*切り取りボタン*/ 41 $('#btnCrop').click(function() { 42 /*切り取る前に前の切り取った画像を削除する*/ 43 $result.empty(); 44 /*切り取った画像を表示*/ 45 var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png"); 46 $result.append( $('<img>').attr('src', croppedImageDataURL) ); 47 }); 48 49 /*やり直しボタン*/ 50 $('#btnRestore').click(function() { 51 canvas.cropper('reset'); 52 $result.empty(); 53 }); 54 }; 55 img.src = evt.target.result; 56 }; 57 reader.readAsDataURL(this.files[0]); 58 } 59 } 60 }); 61}
＝＝＝ここまで＝＝＝
HTML側
＝＝ここから＝＝
HTML
1<div class="modal fade" id="basicExampleModal20" tabindex="-20" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 2 <div class="modal-dialog" role="document"> 3 <div class="modal-content"> 4 <div class="modal-header"> 5 <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeUploadModal(this);"> 6 <span aria-hidden="true">×</span> 7 </button> 8 </div> 9 <div class="modal-body"> 10 <div class="editContents"> 11 <p> 12 <input type="file" id="fileInput" accept="image/*" style="display: none" /> 13 <label for="fileInput" class="uploadImage" >ファイル選択</label> 14 <button type="button" class="uploadImage" id="btnCrop" >切り取り</button> 15 <button type="button" class="uploadImage" id="btnRestore" >やり直す</button> 16 <button type="button" class="uploadImage" id="btnUpload" data-dismiss="modal" aria-label="Close" onclick="imageApplication(this);" >画像登録</button> 17 </p> 18 <div id="ImageCanvas" style="width:500px"> 19 <canvas id="canvas"></canvas> 20 </div> 21 <div id="result"></div> 22 </div> 23 </div> 24 </div> 25 </div> 26 </div>
trimmingImg関数呼び出し箇所
＝＝＝ここから＝＝＝
HTML
1 <div class="carousel-inner"> 2 {section name=i start=0 loop=$user_data["user_images"]|@count} 3 {if $smarty.section.i.index == 0} 4 <div class="carousel-item active"> 5 <input type="image" name="image_data_{$smarty.section.i.index}" src=".{$user_data["user_images"][$smarty.section.i.index]}{$time}" alt="画像アップロード" class="w-100" data-slide-to="{$smarty.section.i.index}" onclick="trimmingImage(this);"> 6 {*<input type="image" name="image_data_{$smarty.section.i.index}" src="{$user_data["user_images"][$smarty.section.i.index]}{$time}" alt="画像アップロード" data-slide-to="{$smarty.section.i.index}" onclick="trimmingImage(this);">*} 7 <input accept="image/*" type="file" class="profileImgFile hide" data-slide-to="{$smarty.section.i.index}" class="w-100" value=""> 8 </div> 9 {else} 10 <div class="carousel-item"> 11 <input type="image" name="image_data_{$smarty.section.i.index}" src=".{$user_data["user_images"][$smarty.section.i.index]}{$time}" alt="画像アップロード" class="w-100" data-slide-to="{$smarty.section.i.index}" onclick="trimmingImage(this);"> 12 <input accept="image/*" type="file" class="profileImgFile hide" data-slide-to="{$smarty.section.i.index}" value=""> 13 </div> 14 {/if} 15 {/section} 16 </div>
＝＝ここまで＝＝
HTML、JavaScript(JQuery)
試したこと
canvasに対してのclearRect
cropperに対するdestroyやreset
すみません、追加しました。
お手数おかけして申し訳ございません
回答1件
0
ベストアンサー
何度も押される関数の中でイベント登録すると重ね付けすることになり、一度イベントが起こると複数回処理が走ることになるのでそういうものが影響しているのかもしれません。
JavaScript
1function trimmingImage( ls_obj ) { 2 $( '#btnCrop, #btnRestore' ).off( 'click' ); // イベント重複を回避 3 $( '#fileInput' ).off( 'change' ); // イベント重複を回避 4 $( '#ImageCanvas' ).empty().html( '<canvas id="canvas"></canvas>' ); // 要素を削除してしまう 5 // 以下略 6} // 未検証
【jQueryのoff()を使いこなす - to-R】
http://blog.webcreativepark.net/2015/08/01-115625.html
投稿2018/12/13 14:27
総合スコア69407
.offでイベント重複を回避することでうまく動作するようになりました
お手数おかけしました、ありがとうございました。
あなたの回答
tips
プレビュー
