Предварительный просмотр изображения перед загрузкой -IOS

Question

Я пытался настроить приложение, чтобы пользователь мог захватить фотографию и просмотреть на холсте перед загрузкой. До сих пор мне удалось захватить изображение и поместить на холст (android chrome), но когда дело доходит до ios, использующего сафари, у меня нет такой удачи (попробовал Ipad, 5C)

вот скрипт, которому я справился (спасибо большое)

Проблема, с которой я сталкиваюсь, заключается в том, что когда я выбираю выбранное изображение, оно должно отображаться в моем iframe (как это делается в хроме), когда я пытаюсь сафари, он не показывает изображение после выбора

вот ссылка образца моего приложения SampleAPP HTML

<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

Вы можете удалить с помощью <canvas> и установить существующие <img>src к e.target.result: data URI из закачанного File объекта на FileReader()load события.

Вы можете определить переменную width, используйте if условие в #imageload случае, когда новый src установлен для проверки #image.naturalWidth свойства, если значение больше width, установите #image.width в 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>