質問編集履歴

4 trimmingImg関数の呼び出し先を追加

退会済みユーザー

退会済みユーザー

2018/12/13 12:52  投稿

cropperで前回取り込んだ画像が残り続けてしまう
### 前提・実現したいこと
質問できるレベルの知識ではないとは思いますがどなたか力を貸していただければ幸いです。
1.cropper用モーダルを立ち上げる
2.ファイルを選択し、トリミングを行う
3.切り取りボタンで選択された範囲をトリミング
4.画像登録ボタンでDBに画像を登録し、モーダルを閉じる
### 発生している問題・エラーメッセージ
再度モーダルを立ち上げた際、canvasに前回の画像(切り取り前の)が残り続けてしまっている
```
エラーメッセージ
```
なし
### 該当のソースコード
JavaScript部分
===ここから===
```ここに言語を入力
```JavaScript
function trimmingImage(ls_obj) {
 var ls_obj = $(ls_obj);
   var canvas = $("#canvas");
   var context = canvas.get(0).getContext("2d");
   var $result = $('#result');
   var img = new Image();
   /*スライドの番号を取得*/
   const dataSlide = ls_obj.attr('data-slide-to');
   $result.empty();
   canvas.cropper('destroy');
   
   img.onload = function() {
       context.canvas.height = img.height;
       context.canvas.width = img.width;
       context.drawImage(img, 0, 0);
   }
   $('#basicExampleModal20').attr('dataSlide',dataSlide).modal('show');
   $('#fileInput').on( 'change', function(){
       if (this.files && this.files[0]) {
           if ( this.files[0].type.match(/^image\//) ) {
               var reader = new FileReader();
               reader.onload = function(evt) {
                   /*画像ファイルを読み込む時に前の画像をリセット*/
                   $result.empty();
                   canvas.cropper('destroy');
                   var img = new Image();
                   /*画像を読み込んだ後に実行する*/
                   img.onload = function() {
                       context.canvas.height = img.height;
                       context.canvas.width = img.width;
                       context.drawImage(img, 0, 0);
                       canvas.cropper({
                           aspectRatio: 1 / 1
                       });
                       /*切り取りボタン*/
                       $('#btnCrop').click(function() {
                           /*切り取る前に前の切り取った画像を削除する*/
                           $result.empty();
                           /*切り取った画像を表示*/
                           var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
                           $result.append( $('<img>').attr('src', croppedImageDataURL) );
                       });
                       /*やり直しボタン*/
                       $('#btnRestore').click(function() {
                           canvas.cropper('reset');
                           $result.empty();
                       });
                   };
                   img.src = evt.target.result;
               };
               reader.readAsDataURL(this.files[0]);
           }
       }
   });
}
```
 
 
===ここまで===
HTML側
==ここから==
```ここに言語を入力
```HTML
<div class="modal fade" id="basicExampleModal20" tabindex="-20" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
           <div class="modal-dialog" role="document">
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeUploadModal(this);">
                           <span aria-hidden="true">&times;</span>
                       </button>
                   </div>
                   <div class="modal-body">
                       <div class="editContents">
                           <p>
                               <input type="file" id="fileInput" accept="image/*" style="display: none" />
                               <label for="fileInput" class="uploadImage" >ファイル選択</label>
                               <button type="button" class="uploadImage" id="btnCrop" >切り取り</button>
                               <button type="button" class="uploadImage" id="btnRestore" >やり直す</button>
                               <button type="button" class="uploadImage" id="btnUpload" data-dismiss="modal" aria-label="Close" onclick="imageApplication(this);" >画像登録</button>
                           </p>
                           <div id="ImageCanvas" style="width:500px">
                               <canvas id="canvas"></canvas>
                           </div>
                           <div id="result"></div>
                       </div>
                   </div>
                   </div>
               </div>
           </div>
```
trimmingImg関数呼び出し箇所  
===ここから===  
```HTML  
           <div class="carousel-inner">  
               {section name=i start=0 loop=$user_data["user_images"]|@count}  
                   {if $smarty.section.i.index == 0}  
                       <div class="carousel-item active">  
                               <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);">  
                               {*<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);">*}  
                           <input accept="image/*" type="file" class="profileImgFile hide" data-slide-to="{$smarty.section.i.index}" class="w-100" value="">  
                       </div>  
                   {else}  
                       <div class="carousel-item">  
                           <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);">  
                           <input accept="image/*" type="file" class="profileImgFile hide" data-slide-to="{$smarty.section.i.index}" value="">  
                       </div>  
                   {/if}  
               {/section}  
           </div>  
```  
==ここまで==
```ここに言語名を入力
HTML、JavaScript(JQuery)
```
### 試したこと
canvasに対してのclearRect
cropperに対するdestroyやreset
  • JavaScript

    20405 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQueryプラグイン

    618 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

3 初心者マークの追加

退会済みユーザー

退会済みユーザー

2018/12/13 10:54  投稿

cropperで前回取り込んだ画像が残り続けてしまう
### 前提・実現したいこと
質問できるレベルの知識ではないとは思いますがどなたか力を貸していただければ幸いです。
1.cropper用モーダルを立ち上げる
2.ファイルを選択し、トリミングを行う
3.切り取りボタンで選択された範囲をトリミング
4.画像登録ボタンでDBに画像を登録し、モーダルを閉じる
### 発生している問題・エラーメッセージ
再度モーダルを立ち上げた際、canvasに前回の画像(切り取り前の)が残り続けてしまっている
```
エラーメッセージ
```
なし
### 該当のソースコード
JavaScript部分
===ここから===
```ここに言語を入力
function trimmingImage(ls_obj) {
var ls_obj = $(ls_obj);
var canvas = $("#canvas");
var context = canvas.get(0).getContext("2d");
var $result = $('#result');
var img = new Image();
/*スライドの番号を取得*/
const dataSlide = ls_obj.attr('data-slide-to');
$result.empty();
canvas.cropper('destroy');
img.onload = function() {
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
}
$('#basicExampleModal20').attr('dataSlide',dataSlide).modal('show');
$('#fileInput').on( 'change', function(){
if (this.files && this.files[0]) {
if ( this.files[0].type.match(/^image\//) ) {
var reader = new FileReader();
reader.onload = function(evt) {
/*画像ファイルを読み込む時に前の画像をリセット*/
$result.empty();
canvas.cropper('destroy');
var img = new Image();
/*画像を読み込んだ後に実行する*/
img.onload = function() {
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
canvas.cropper({
aspectRatio: 1 / 1
});
/*切り取りボタン*/
$('#btnCrop').click(function() {
/*切り取る前に前の切り取った画像を削除する*/
$result.empty();
/*切り取った画像を表示*/
var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
$result.append( $('<img>').attr('src', croppedImageDataURL) );
});
/*やり直しボタン*/
$('#btnRestore').click(function() {
canvas.cropper('reset');
$result.empty();
});
};
img.src = evt.target.result;
};
reader.readAsDataURL(this.files[0]);
}
}
});
}
```
===ここまで===
HTML側
==ここから==
```ここに言語を入力
<div class="modal fade" id="basicExampleModal20" tabindex="-20" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeUploadModal(this);">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="editContents">
<p>
<input type="file" id="fileInput" accept="image/*" style="display: none" />
<label for="fileInput" class="uploadImage" >ファイル選択</label>
<button type="button" class="uploadImage" id="btnCrop" >切り取り</button>
<button type="button" class="uploadImage" id="btnRestore" >やり直す</button>
<button type="button" class="uploadImage" id="btnUpload" data-dismiss="modal" aria-label="Close" onclick="imageApplication(this);" >画像登録</button>
</p>
<div id="ImageCanvas" style="width:500px">
<canvas id="canvas"></canvas>
</div>
<div id="result"></div>
</div>
</div>
</div>
</div>
</div>
```
==ここまで==
```ここに言語名を入力
HTML、JavaScript(JQuery)
```
### 試したこと
canvasに対してのclearRect
cropperに対するdestroyやreset
  • JavaScript

    20405 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQueryプラグイン

    618 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

2 上げ忘れ

退会済みユーザー

退会済みユーザー

2018/12/13 10:27  投稿

cropperで前回取り込んだ画像が残り続けてしまう
### 前提・実現したいこと
質問できるレベルの知識ではないとは思いますがどなたか力を貸していただければ幸いです。
1.cropper用モーダルを立ち上げる
2.ファイルを選択し、トリミングを行う
3.切り取りボタンで選択された範囲をトリミング
4.画像登録ボタンでDBに画像を登録し、モーダルを閉じる
### 発生している問題・エラーメッセージ
再度モーダルを立ち上げた際、canvasに前回の画像(切り取り前の)が残り続けてしまっている
```
エラーメッセージ
```
なし
### 該当のソースコード
JavaScript部分
===ここから===
```ここに言語を入力
function trimmingImage(ls_obj) {
 var ls_obj = $(ls_obj);
   var canvas = $("#canvas");
   var context = canvas.get(0).getContext("2d");
   var $result = $('#result');
   var img = new Image();
   /*スライドの番号を取得*/
   const dataSlide = ls_obj.attr('data-slide-to');
   $result.empty();
   canvas.cropper('destroy');
   
   img.onload = function() {
       context.canvas.height = img.height;
       context.canvas.width = img.width;
       context.drawImage(img, 0, 0);
   }
   $('#basicExampleModal20').attr('dataSlide',dataSlide).modal('show');
   $('#fileInput').on( 'change', function(){
       if (this.files && this.files[0]) {
           if ( this.files[0].type.match(/^image\//) ) {
               var reader = new FileReader();
               reader.onload = function(evt) {
                   /*画像ファイルを読み込む時に前の画像をリセット*/
                   $result.empty();
                   canvas.cropper('destroy');
                   var img = new Image();
                   /*画像を読み込んだ後に実行する*/
                   img.onload = function() {
                       context.canvas.height = img.height;
                       context.canvas.width = img.width;
                       context.drawImage(img, 0, 0);
                       canvas.cropper({
                           aspectRatio: 1 / 1
                       });
                       /*切り取りボタン*/
                       $('#btnCrop').click(function() {
                           /*切り取る前に前の切り取った画像を削除する*/
                           $result.empty();
                           /*切り取った画像を表示*/
                           var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
                           $result.append( $('<img>').attr('src', croppedImageDataURL) );
                       });
                       /*やり直しボタン*/
                       $('#btnRestore').click(function() {
                           canvas.cropper('reset');
                           $result.empty();
                       });
                   };
                   img.src = evt.target.result;
               };
               reader.readAsDataURL(this.files[0]);
           }
       }
   });
}
```
===ここまで===
```ここに言語を入力  
HTML側
==ここから==
```ここに言語を入力  
<div class="modal fade" id="basicExampleModal20" tabindex="-20" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
           <div class="modal-dialog" role="document">
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeUploadModal(this);">
                           <span aria-hidden="true">&times;</span>
                       </button>
                   </div>
                   <div class="modal-body">
                       <div class="editContents">
                           <p>
                               <input type="file" id="fileInput" accept="image/*" style="display: none" />
                               <label for="fileInput" class="uploadImage" >ファイル選択</label>
                               <button type="button" class="uploadImage" id="btnCrop" >切り取り</button>
                               <button type="button" class="uploadImage" id="btnRestore" >やり直す</button>
                               <button type="button" class="uploadImage" id="btnUpload" data-dismiss="modal" aria-label="Close" onclick="imageApplication(this);" >画像登録</button>
                           </p>
                           <div id="ImageCanvas" style="width:500px">
                               <canvas id="canvas"></canvas>
                           </div>
                           <div id="result"></div>
                       </div>
                   </div>
                   </div>
               </div>
           </div>
```  
==ここまで==
```  
```ここに言語名を入力
HTML、JavaScript(JQuery)
```
### 試したこと
canvasに対してのclearRect
cropperに対するdestroyやreset
  • JavaScript

    20405 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQueryプラグイン

    618 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

1 code化し忘れておりました。

退会済みユーザー

退会済みユーザー

2018/12/13 10:26  投稿

cropperで前回取り込んだ画像が残り続けてしまう
### 前提・実現したいこと
質問できるレベルの知識ではないとは思いますがどなたか力を貸していただければ幸いです。
1.cropper用モーダルを立ち上げる
2.ファイルを選択し、トリミングを行う
3.切り取りボタンで選択された範囲をトリミング
4.画像登録ボタンでDBに画像を登録し、モーダルを閉じる
### 発生している問題・エラーメッセージ
再度モーダルを立ち上げた際、canvasに前回の画像(切り取り前の)が残り続けてしまっている
```
エラーメッセージ
```
なし
### 該当のソースコード
JavaScript部分
===ここから===
```ここに言語を入力  
function trimmingImage(ls_obj) {
 var ls_obj = $(ls_obj);
   var canvas = $("#canvas");
   var context = canvas.get(0).getContext("2d");
   var $result = $('#result');
   var img = new Image();
   /*スライドの番号を取得*/
   const dataSlide = ls_obj.attr('data-slide-to');
   $result.empty();
   canvas.cropper('destroy');
   
   img.onload = function() {
       context.canvas.height = img.height;
       context.canvas.width = img.width;
       context.drawImage(img, 0, 0);
   }
   $('#basicExampleModal20').attr('dataSlide',dataSlide).modal('show');
   $('#fileInput').on( 'change', function(){
       if (this.files && this.files[0]) {
           if ( this.files[0].type.match(/^image\//) ) {
               var reader = new FileReader();
               reader.onload = function(evt) {
                   /*画像ファイルを読み込む時に前の画像をリセット*/
                   $result.empty();
                   canvas.cropper('destroy');
                   var img = new Image();
                   /*画像を読み込んだ後に実行する*/
                   img.onload = function() {
                       context.canvas.height = img.height;
                       context.canvas.width = img.width;
                       context.drawImage(img, 0, 0);
                       canvas.cropper({
                           aspectRatio: 1 / 1
                       });
                       /*切り取りボタン*/
                       $('#btnCrop').click(function() {
                           /*切り取る前に前の切り取った画像を削除する*/
                           $result.empty();
                           /*切り取った画像を表示*/
                           var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
                           $result.append( $('<img>').attr('src', croppedImageDataURL) );
                       });
                       /*やり直しボタン*/
                       $('#btnRestore').click(function() {
                           canvas.cropper('reset');
                           $result.empty();
                       });
                   };
                   img.src = evt.target.result;
               };
               reader.readAsDataURL(this.files[0]);
           }
       }
   });
}
```  
===ここまで===
```ここに言語を入力  
HTML側
==ここから==
<div class="modal fade" id="basicExampleModal20" tabindex="-20" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
           <div class="modal-dialog" role="document">
               <div class="modal-content">
                   <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeUploadModal(this);">
                           <span aria-hidden="true">&times;</span>
                       </button>
                   </div>
                   <div class="modal-body">
                       <div class="editContents">
                           <p>
                               <input type="file" id="fileInput" accept="image/*" style="display: none" />
                               <label for="fileInput" class="uploadImage" >ファイル選択</label>
                               <button type="button" class="uploadImage" id="btnCrop" >切り取り</button>
                               <button type="button" class="uploadImage" id="btnRestore" >やり直す</button>
                               <button type="button" class="uploadImage" id="btnUpload" data-dismiss="modal" aria-label="Close" onclick="imageApplication(this);" >画像登録</button>
                           </p>
                           <div id="ImageCanvas" style="width:500px">
                               <canvas id="canvas"></canvas>
                           </div>
                           <div id="result"></div>
                       </div>
                   </div>
                   </div>
               </div>
           </div>
==ここまで==
```  
```ここに言語名を入力
HTML、JavaScript(JQuery)
```
### 試したこと
canvasに対してのclearRect
cropperに対するdestroyやreset
  • JavaScript

    20405 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQueryプラグイン

    618 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る