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" 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" 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 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!
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" 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" 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 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>
Related
I am trying to create a camera icon using that i am only wanted to click photo not upload photo and i am able to create a camera icon and when i am clicking on that it shows choose file which i don't want to add in this here is my tried code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://unpkg.com/material-components-web#7.0.0/dist/material-components-web.min.css"
/>
<script
defer
src="https://unpkg.com/material-components-web#7.0.0/dist/material-components-web.min.js"
></script>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
</head>
<body>
<span class="material-icons" id="camera"> camera_alt </span>
</body>
<script>
const camera = document.getElementById("camera");
camera.addEventListener("click", () => {
console.log("camera is clicked");
const input = document.createElement("INPUT");
input.type = "file";
camera.appendChild(input);
});
</script>
</html>
I have all files zipped here if you want to view all of them yourself
So... Ace text editor has been really complicated for me to set up. I thought I had everything down, but no. So far, I have incorporated download buttons just fine. It took me a while, but then I went the hidden element way and did this.
function downloadHTML() {
var HTMLtextToSave = editor.getValue();
var HTMLhiddenElement = document.createElement("a");
HTMLhiddenElement.href = 'data:attachment/text,' + encodeURI(HTMLtextToSave);
HTMLhiddenElement.target = '_blank';
HTMLhiddenElement.download = 'untitled.html';
HTMLhiddenElement.click();
}
Everything worked great until I tried CSS. For some stupid reason, the getValue() decides to have a seizure everytime it sees a hashtag (#). It downloads all of the code up until it sees it, and then it stops. I really need a fix for this. I call my project GridOff for right now (beta). You can download what I have zipped right now here. Here is my HTML code for the HTML editor.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<!-- Put editor language e.g.: Ace HTML Editor -->
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
<!-- Defines character set -->
<link type="text/css" rel="stylesheet" href="../CSS/stylesheet.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shorcut icon" href="../Other/html5favicon.ico">
<!-- Favicon -->
<script type="text/javascript" src="../JavaScript/index.js"></script>
<!-- JavaScript Index -->
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="button" id="openbtn" onclick="openCode()" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<input type="button" id="togglebtn2" onclick="toggleVisibility2()" value="Toggle">
<div id="editor"><!DOCTYPE html>
<html>
<head lang="">
<meta charset="">
<link type="text/css" rel="stylesheet" href="">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="">
<!-- Favicon -->
<title></title>
</head>
<body>
<p>Ace HTML Editor</p>
</body>
</html></div>
<!-- In this div, put filler text -->
<!-- use < for < -->
<script src="../Other/Ace/ace-builds-master/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
// editor.setTheme("ace/theme/themeHere")
// editor.session.setmode("ace/mode/languageHere")
</script>
</body>
</html>
Also, I cannot find a way for it to browse for only html files, open them in the editor, and edit them. If anyone has a solution to any of these issues that I'm having, feel free to comment. I'm looking for anything right now. Thank you StackOverflow!
You need to use encodeURIComponent instead of encodeURI to encode special characters like # or &
Or use
href = URL.createObjectURL(new Blob(value)], { type: "text/plain" }));
I am trying to implement a Dropzone element to allow my user to easily drag and drop multiple files to upload into my web app. However, I don't really understand or know how to integrate the source code into my current solution. Can someone help me out on this?
Currently, I have a base.html to store all the frontend libraries/dependencies like bootstrap.min.css and jquery.min.js. Based on that understanding, i did a similar import for dropzone.js and dropzone.css. But I can't seemed to get it working.
"base.html" at root folder
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js" />
<link rel="stylesheet" type="text/css" href="includes/css/basic.css" />
<link rel="stylesheet" type="text/css" href="includes/css/dropzone.css" />
<script type="text/javascript" src="includes/js/dropzone.js" />
<script>
Dropzone.autoDiscover = false;
window.onload = function () {
var dropzoneOptions = {
dictDefaultMessage: 'Drop Here!',
paramName: "file",
maxFilesize: 2, // MB
addRemoveLinks: true,
init: function () {
this.on("success", function (file) {
console.log("success > " + file.name);
});
}
};
var uploader = document.querySelector('#uploader');
var newDropzone = new Dropzone(uploader, dropzoneOptions);
console.log("Loaded");
};
</script>
<!-- Font Awesome -->
<title>Market Data Terminal Analysis</title>
</head>
<body>
{% include 'includes/_navbar.html' %}
<div class="container-fluid">
{% block content %}{% endblock content%}
</div>
</body>
I stored my dropzone.js and dropzone.css in root/includes/js and root/includes/css respectively.
Expecting a dropzone element on my page, but still not appearing.
I have the following problem: I need to be able to add dynamically a canvas (to be precise, a specific canvas, like this one https://web.chemdoodle.com/tutorial/2d-structure-canvases/sketcher-canvas/) in .js file but my several attempts failed. I want to insert the canvas into <div id="sketcher_canvas"></div>.The canvas can be created inside script tag only, so I need to add script tags to HTML too. Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ELN</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link href="{{url_for('static', filename='css/main.css')}}" rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="{{url_for('static', filename='js/main2.js')}}"></script>
<!-- ChemDoodle -->
<link rel="stylesheet" href="{{url_for('static', filename='ChemDoodle/install/ChemDoodleWeb.css')}}" type="text/css">
<script type="text/javascript" src="{{url_for('static', filename='ChemDoodle/install/ChemDoodleWeb.js')}}"></script>
<!--these two are required by the SketcherCanvas plugin-->
<link rel="stylesheet" href="{{ url_for('static', filename='ChemDoodle/install/uis/jquery-ui-1.10.3.custom.css')}}" type="text/css">
<script type="text/javascript" src="{{url_for('static', filename='ChemDoodle/install/uis/ChemDoodleWeb-uis.js')}}"></script>
</head>
<body>
<script>
function make_canvas(){
sketcher = new ChemDoodle.SketcherCanvas('sketcher',600,200);
};
</script>
<div id='sketcher_canvas'>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
And this is my .js:
$(document).ready(function(){
// First option
$('sketcher_canvas').append('<script>make_canvas();<\/script>);
// Second option
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "make_canvas()";
var div = document.getElementById('sketcher_canvas');
div.innerHTML = script.text;
});
Any comments/suggestions are highly appreciated!
It looks like you are making things more complicated than they need to be. You don't need to make a new script to call a function from another script. You can call that function with a button like so:
<script>
function make_canvas(){
var newCanvas = document.createElement("canvas");
newCanvas.id = "sketcher";
newCanvas.class = "ChemDoodleWebComponent";
document.getElementById("sketcher_canvas").appendChild(newCanvas);
sketcher = new ChemDoodle.SketcherCanvas('sketcher',600,200);
};
</script>
<button onclick="make_canvas()">Make Canvas</button>
<div id='sketcher_canvas'>
</div>
EDIT: I have updated the make_canvas function. You can see how it works in this fiddle.
I am new to Phonegap (Cardova),I want to play a local mp3 file,it can play a file from url,but not a local file.My file is located in Assets --> www --> audio --> Ikhlas.mp3 , I using Jquery Mobile with multiple pages. and in each page I will have to play a different audio file with Oclick Play Button. when ever i click the button to play i got the following errors :
07-19 07:43:58.829: E/MediaPlayer(1081): Attempt to call getDuration without a valid mediaplayer,
07-19 07:43:58.838: E/MediaPlayer(1081): Attempt to perform seekTo in wrong state: mPlayer=0x0, mCurrentState=0
any help will be highly appreciated. Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="css/themes/default/my_style.css">
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/droid-arabic-naskh" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script>
var myaudio = new Audio('/android_asset/www/audio/Ikhlas.mp3');
function playStream() {
try {
//alert ("ffff");
myaudio.id = 'playerMyAdio';
myaudio.play();
} catch (e) {
alert('no audio support!');
}
}
function stopStream() {
try {
myaudio.pause();
} catch (e) {
alert('no audio support!');
}
}
</script>
<div data-role="page" id="Ikhlas">
<div data-role="header">
back
<a href="index.html" data-icon="home" class="ui-btn-right" class="ui-icon-nodisc"
data-iconshadow="false" data-iconpos="notext">Home</a>
</div>
<!-- /header -->
<body>
<div data-role="content">
<button onClick="playStream()">play</button><br />
<button onClick="stopStream()">stop</button><br />
</div>
<!-- /content -->
<div data-role="footer">Go Back</div>
</div>
</body>
</html>
Use Media instead of Audio
and put this line of code
var myaudio = new Media('/android_asset/www/audio/Ikhlas.mp3');
inside your function playStream()