アップロード前の画像プレビュー-IOS

Question

アップロードする前に写真をキャプチャしキャンバスでプレビューできるようにするためにアプリをセットアップしようとしています。これまで私はキャンバス（アンドロイドクロム）にイメージと場所をキャプチャすることができましたが、サファリを使用していて、そのような運がない場合（Ipad、5Cを試しました）

ここに私が管理しているスクリプトです私は、選択した画像を選択すると、iframeに表示されるはずです（Chromeでのように）。私はサファリを試してみると画像は表示されません。ここ

を選択した後、私のアプリへのサンプルリンクが SampleAPP HTML

ですアップロード Fileオブジェクトの data URI​​ loadイベントで：あなたは <canvas>を使用して削除して e.target.resultに <img> srcを既存の設定ができ

<img src="" id="image"> 
<input id="input" type="file" onchange="handleFiles()"> 

JAVASCRIPT

<script> 

function handleFiles() 
{ 
var filesToUpload = document.getElementById('input').files; 
var file = filesToUpload[0]; 

// Create an image 
var img = document.createElement("img"); 
// Create a file reader 
var reader = new FileReader(); 
// Set the image once loaded into file reader 
reader.onload = function(e) 
{ 
    img.src = e.target.result; 

    var canvas = document.createElement("canvas"); 


    var MAX_WIDTH = 400; 
    var MAX_HEIGHT = 300; 
    var width = img.width; 
    var height = img.height; 

    if (width > height) { 
     if (width > MAX_WIDTH) { 
     height *= MAX_WIDTH/width; 
     width = MAX_WIDTH; 
     } 
    } else { 
     if (height > MAX_HEIGHT) { 
     width *= MAX_HEIGHT/height; 
     height = MAX_HEIGHT; 
     } 
    } 
    canvas.width = width; 
    canvas.height = height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0, width, height); 

    var dataurl = canvas.toDataURL("image/png"); 
    document.getElementById('image').src = dataurl;  
} 
// Load files into file reader 
reader.readAsDataURL(file); 


// Post the data 
/* 
var fd = new FormData(); 
fd.append("name", "some_filename.jpg"); 
fd.append("image", dataurl); 
fd.append("info", "lah_de_dah"); 
*/ 
} 
</script> 

Answer 1

。

新しいsrcは値がwidthよりも大きい場合、#image.naturalWidthプロパティをチェックするように設定width変数に#image.widthに設定されている場合#imageloadイベントでif条件を使用して、変数width定義することができます。

<img src="" id="image"> 
 
<input id="input" type="file" onchange="handleFiles()"> 
 
<script> 
 
    var img = document.getElementById("image"); 
 
    var width = 400; 
 
    function handleFiles() { 
 
    var filesToUpload = document.getElementById('input').files; 
 
    var file = filesToUpload[0]; 
 

 
    // Create a file reader 
 
    var reader = new FileReader(); 
 
    // Set the image once loaded into file reader 
 
    reader.onload = function(e) { 
 
     img.onload = function() { 
 
     if (this.naturalWidth > width) { 
 
      this.width = width; 
 
     } 
 
     } 
 
     img.src = e.target.result; 
 
    } 
 
    reader.readAsDataURL(file); 
 
    } 
 
</script>