- From: CVS User akostiai <cvsmail@w3.org>
- Date: Fri, 30 Nov 2012 09:08:47 +0000
- To: public-dap-commits@w3.org
Update of /sources/public/2009/dap/camera
In directory roscoe:/tmp/cvs-serv15728
Modified Files:
unofficial.html
Log Message:
add yet another example
--- /sources/public/2009/dap/camera/unofficial.html 2012/11/29 15:27:26 1.2
+++ /sources/public/2009/dap/camera/unofficial.html 2012/11/30 09:08:47 1.3
@@ -243,8 +243,11 @@
var input = document.querySelector('input[type=file]');
input.onchange = function () {
- upload(input.files[0]);
- draw(input.files[0]);
+ var file = input.files[0];
+
+ upload(file);
+ drawOnCanvas(file);
+ displayAsImage(file);
};
function upload(file) {
@@ -257,10 +260,10 @@
}
</pre>
The image can also be displayed on the client-side without uploading
- it e.g. for client-side image editing purposes, using
- <code>FileReader</code> and <code>canvas</code> element:
+ it e.g. for client-side image editing purposes, using the
+ <code>FileReader</code> and a <code>canvas</code> element:
<pre class="example sh_javascript">
- function draw(file) {
+ function drawOnCanvas(file) {
var reader = new FileReader();
reader.onload = function (e) {
@@ -281,6 +284,22 @@
reader.readAsDataURL(file);
}
</pre>
+ Or alternatively, to just display the image, using the
+ <code>createObjectURL()</code> method and an <code>img</code>
+ element:
+ <pre class="example sh_javascript">
+ function displayAsImage(file) {
+ var imgURL = URL.createObjectURL(file),
+ img = document.createElement('img');
+
+ img.onload = function() {
+ URL.revokeObjectURL(imgURL);
+ };
+
+ img.src = imgURL;
+ document.body.appendChild(img);
+ }
+ </pre>
</li>
</ul>
<p>
Received on Friday, 30 November 2012 09:08:49 UTC