image preview before uploading -IOS

Question

I have been trying to setup up an app to allow user to capture a photo and preview on canvas before uploading. So far i have been able to capture image and place onto canvas(android chrome), but when it comes to ios using safari i am having no such luck (tried Ipad, 5C)

here is the script i have manage to piece together thanks to the help of stackoverflow community (many thanks)

The issue I am having is that when i choose selected image it should display in my iframe (as it does in chrome) when i try safari it shows no image after selecting

here is a sample link to my app 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>

Can you elaborate on how your code "doesn't work"? What were you expecting, and what actually happened? If you got an exception/error, post the line it occurred on and the exception/error details. Please edit these details in or we may not be able to help. — Goodbye StackExchange

guest271314 guest271314 · Accepted Answer · 2016-08-07T04:29:16

You can remove using <canvas> and set existing <img> src to e.target.result : data URI of uploaded File object at FileReader() load event.

You can defined variable width, use if condition at #image load event when new src is set to check #image .naturalWidth property, if value is greater than width , set #image.width to width variable.

<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>

image preview before uploading -IOS

1 Answers