JavaScript（モバイルカメラ）でローカル画像を表示

これはユーザーのローカルマシンから画像を表示するためのコードですが、初めて動作しないことがあります。特に（携帯の）ユーザーがカメラから写真を撮るとき。

ユーザーが初めて自分の画像を選択するのはほとんどの場合、うまくいきません。
私はImage()を使用して、aspectRatioの画像の幅と高さをresizableとします。JavaScript（モバイルカメラ）でローカル画像を表示

<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Upload Image</title> 
 
    <style> 
 
     * { 
 
      padding: 0; 
 
      margin: 0; 
 
     } 
 

 
     body { 
 
      height: 100%; 
 
      display: flex; 
 
      justify-content: center; 
 
      align-items: center; 
 
     } 
 

 
     .select-img { 
 
      width: 450px; 
 
      height: 250px; 
 
      border-radius: 10px; 
 
      cursor: pointer; 
 
      border: 3px dashed gray; 
 
      display: flex; 
 
      justify-content: center; 
 
      align-items: center; 
 
      font-family: sans-serif; 
 
      font-size: 25px; 
 
     } 
 

 
     #image { 
 
      display: none; 
 
     } 
 
    </style> 
 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
</head> 
 
<body> 
 
    
 
    <div class="select-img"> 
 
     <p>Select Image</p> 
 
    </div> 
 

 
    <img id="image"> 
 

 
    <script> 
 
     function upload (file) { 
 
      var fr = new FileReader(); 
 

 
      fr.onload = function (event) { 
 
       var src = event.target.result; 
 
       var img = new Image(); 
 

 
       img.onload = function() { 
 
        $('.select-img').remove(); 
 
        $('#image').css('display', 'block').attr('src', src).resizable({ aspectRatio: this.width/this.height }); 
 
       }; 
 

 
       img.src = src; 
 
      }; 
 

 
      fr.readAsDataURL(file); 
 
     } 
 

 
     $('.select-img').click(function() { 
 
      var fileInput = $(document.createElement("input")); 
 
      fileInput.attr('type', 'file'); 
 
      fileInput.attr('accept', 'image/*'); 
 
      fileInput.trigger('click'); 
 

 
      $(fileInput).on('change', function (ev) { 
 
       upload(ev.target.files[0]); 
 
      }); 
 

 
      return false; 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

出典

2017-12-12 M. Mohammadi

コンソールにアラートがありますか？モバイルでどのブラウザをテストしていますか？ – Twisty

@Twistyコンソールにアラートがありません。 Chromeを使用していますが、他のブラウザは動作しません。 –

初期テストといくつかの最適化が必要なコードが見つかりました：https://jsfiddle.net/Twisty/188x0w0u/ - モバイルテストの場合：https://jsfiddle.net/Twisty/188x0w0u/show/ – Twisty

Android上でデスクトップとChrome上のFireFoxを経由して、いくつかのintitialのテストを行いました。 jQueryのをより有効に活用するためにコーディングするhttps://jsfiddle.net/Twisty/188x0w0u/show

はJavaScript

$(function() { 
    function upload(file) { 
    var fr = new FileReader(); 

    fr.onload = function(event) { 
     var src = event.target.result; 
     var img = new Image(); 

     img.onload = function() { 
     $('.select-img').remove(); 
     $('#image').css('display', 'block').attr('src', src).resizable({ 
      aspectRatio: this.width/this.height 
     }); 
     }; 
     img.src = src; 
    }; 

    fr.readAsDataURL(file); 
    } 

    $('.select-img').click(function() { 
    var fileInput = $("<input>", { 
     type: "file", 
     accept: "image/*" 
    }); 
    fileInput.trigger('click'); 

    fileInput.on('change', function(ev) { 
     upload(ev.target.files[0]); 
    }); 

    return false; 
    }); 
});

マイナースイッチ：モバイル試験、使用のために - https://jsfiddle.net/Twisty/188x0w0u：

実施例：画像を表示するための適切な作業の両方。これは、カメラからの写真のキャプチャとモバイルデバイス上のドキュメントからの写真の選択の両方で機能しました。

サイズ変更が失敗し、私にとってはこれが予想されていました。タッチパンチを追加します。

https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js

新しいテスト：https://jsfiddle.net/Twisty/188x0w0u/2/

モバイル：今https://jsfiddle.net/Twisty/188x0w0u/2/show/

あまりにもモバイルで.resizable()作品。

出典

2017-12-14 06:16:30 Twisty

これはありません。私はフロントカメラ（selfie）から写真を撮るときにモバイル上で働く！ –

@ M.Mohammadi問題を再現できませんでした。問題を再現するための詳細を記述し、テストに使用している電話機とブラウザを含めてください。 – Twisty

私はGalaxy S8 +とChrome 62.0.3202.84を使用しています。私のクライアント（全員）に同じ問題があります！フロントカメラを使うだけです。 –