Ad
Opening Image File From JavaScript (doesn't Work On Mobile Phones)
I am trying to open image files using JavaScript. It works successfully on Chrome (showing no errors), but the image refuses to show on my iPhone. Is this because the image is too large (like the DATA url is too long)?
My code uses FileReader, gets the img.src, and outputs it as an img tag as shown below:
if(window.FileReader) { //do this
$('input').change(function() {
$("#result").html("SELECTING IMAGE ... ... ...");
var fr = new FileReader;
fr.onload = function() {
var img = new Image;
img.onload = function() {
//I loaded the image and have complete control over all attributes, like width and src, which is the purpose of filereader.
$.ajax({url: img.src, async: true, success: function(result){
$("#result").html("<img src='ajax-loader.gif' />");
setTimeout(function(){
$("#result").html("<img src='" + img.src + "' /> <br/> <br/>" + "<a href='" + img.src + "'>View in browser</a>");
console.log("Finished reading Image");document.getElementById('iPUT').style.opacity=0.01;
}, 1000);
}});
};
img.src = fr.result;
};
fr.readAsDataURL(this.files[0]);
});
} else {
alert("You don't support FileReader");
}
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" target="_blank" rel="nofollow noreferrer" href="/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="icon" target="_blank" rel="nofollow noreferrer" href="/favicon.ico" type="image/x-icon">
<title>iViewr</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link target="_blank" rel="nofollow noreferrer" href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body cz-shortcut-listen="true">
<div onclick="document.getElementById('iPUT').style.opacity=0.01">
<button onclick="document.getElementById('result').style.zoom=0.5;this.blur();">Zoom out</button>
<button onclick="document.getElementById('result').style.zoom=1.0;this.blur();">Zoom normal</button>
<button onclick="document.getElementById('result').style.zoom=1.5;this.blur();">Zoom in</button>
<br>
</div>
<div id="inputDIV" onclick="document.getElementById('iPUT').style.opacity=0.5"><input type="file" id="iPUT" accept="image/*" capture="camera" style="opacity: 0.5;"></div>
<div id="result">Please choose a file to view it.</div>
<script src="index.js"></script>
</body></html>
You can see it in action here at: http://iviewr.neocities.org/
Thanks in advance!
Ad
Answer
Use the URL.createObjectURL() on the file chosen by the input, as shown below. Credits to @dandavis.
$('input').change(function(){
var resultPreview = document.getElementById('result');
var file = document.querySelector('input[type=file]').files[0]; //selects the very first file
var fr = new FileReader();
fr.addEventListener('load', function(){
//once the FileReader is loaded,
resultPreview.src = fr.result;
console.log("Finished reading Image");document.getElementById('iPUT').style.opacity=0.01;
document.getElementById('help').innerHTML="You can choose another image by tapping the screen again.";
}, false);
if (file){ //if there even is a first file
fr.readAsDataURL(file); //don't want to mess with Data URLs!! this calls the function above
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="icon" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/favicon.ico" type="image/x-icon">
<title>iViewr</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div onclick="document.getElementById('iPUT').style.opacity=0.01">
<button onclick="document.getElementById('result').style.zoom=0.5;this.blur();">Zoom out</button>
<button onclick="document.getElementById('result').style.zoom=1.0;this.blur();">Zoom normal</button>
<button onclick="document.getElementById('result').style.zoom=1.5;this.blur();">Zoom in</button>
<br />
</div>
<div id='help'>Tap the middle of the screen to select an image for the computer to guess.</div>
<div id='inputDIV' onclick="document.getElementById('iPUT').style.opacity=0.5"><input type="file" id='iPUT' accept="image/*" capture="camera"></div>
<img id='result' src=''/>
<script src='index.js'></script>
</body>
</html>
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad