Codenstuff.com

Posted: **Mon May 06, 2013 9:41 pm**

Screenshot:

html5imageviewer.png

Here's a simple html5 canvas image viewer for you all.

HTML:

Code: Select all

<input type="file" id="openimg"> <input type="button" id="load" value="Load" style="width:100px;"><br/>

Width and Height (px): <input type="text" id="width" style="width:100px;">, <input type="text" id="height" style="width:100px;"><br/>

<canvas id="myimg" width="300" height="300"></canvas>

JavaScript/JQuery:

Code: Select all

$(function(){
	var canvas = document.getElementById("myimg");
	var context = canvas.getContext("2d");

	function draw() {
		var chosenimg = $("#openimg").val();
		var w = parseInt($("#width").val());
		var h = parseInt($("#height").val());
		canvas.width = w;
		canvas.height = h;

		var img = new Image();
		img.onload = function () {
			context.drawImage(img,0,0,img.width,img.height,0,0,w,h);
		}
		img.src = $("#openimg").val();}

	$("#width").val(150);
	$("#height").val(150);

	$("#load").click(function(){ draw(); });
});

Full Code:

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Image Viewer</title>
<meta name="Description" content="The Simple Open Source HTML5 Image Viewer">
<meta http-equiv="Content-Type" charset='utf-8' content="text/html;charset=ISO-8859-1">
<meta name="Keywords" content="html5, image, viewer">
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
<link rel="SHORTCUT ICON" href="favicon.ico">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<style type="text/css">
body {
	background-color:ivory;}
	
canvas#myimg {
	border:1px dashed red;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type='text/javascript'>
$(function(){
	$("canvas#myimg").draggable();
	
	var canvas = document.getElementById("myimg");
	var context = canvas.getContext("2d");

	function draw() {
		var chosenimg = $("#openimg").val();
		var w = parseInt($("#width").val());
		var h = parseInt($("#height").val());
		canvas.width = w;
		canvas.height = h;

		var img = new Image();
		img.onload = function () {
			context.drawImage(img,0,0,img.width,img.height,0,0,w,h);
		}
		img.src = $("#openimg").val();}

	$("#width").val(150);
	$("#height").val(150);

	$("#load").click(function(){ draw(); });
});
</script>
</head>
<body>
	<input type="file" id="openimg"> <input type="button" id="load" value="Load" style="width:100px;"><br/>
	
	Width and Height (px): <input type="text" id="width" style="width:100px;">, <input type="text" id="height" style="width:100px;"><br/>
    
	<canvas id="myimg" width="300" height="300"></canvas>
</body>
</html>

If you have trouble with the top one, here's a modified version that's more supported.

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Image Viewer</title>
<meta name="Description" content="The Simple Open Source HTML5 Image Viewer">
<meta http-equiv="Content-Type" charset='utf-8' content="text/html;charset=ISO-8859-1">
<meta name="Keywords" content="html5, image, viewer">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
body {
   background-color:ivory;}
   
canvas#myimg {
   border:1px dashed red;}
</style>
</head>
<body>
<article>
  <p id="status">File API & FileReader API not supported</p>
  <p><input type=file></p>
  <p>Width and Height (px): <input type="text" id="width" style="width:100px;"><br>
  Choose width, & it'll maintain it's aspect ratio by default. You may need to choose a different file & revert back to make sure your changes have been added.</p>
  <p>Select an image from your machine to read the contents of the file without using a server</p>
  <div id="holder"></div>
</article>
<script>
var upload = document.getElementsByTagName('input')[0],
    holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader === 'undefined') {
  state.className = 'fail';
} else {
  state.className = 'success';
  state.innerHTML = 'File API & FileReader available';
}

upload.onchange = function (e) {
  e.preventDefault();

  var file = upload.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
	var w = parseInt($("#width").val());
    var img = new Image();
    img.src = event.target.result;
    // note: no onload required since we've got the dataurl...I think! :)
    if (img.width > w) { // holder width
      img.width = w;
    }
    holder.innerHTML = '';
    holder.appendChild(img);
  };
  reader.readAsDataURL(file);

  return false;
};
</script>
</body>
</html>

Feel free to donate

html5imageviewer.zip

Posted: **Sun Jun 02, 2013 10:32 pm**

This next code is from - http://html5demos.com/file-api-simple

I noticed the code above from my original post didn't seem to work very well on firefox, or on my website, just on my desktop via hard drive. So here's an alternative.

Code: Select all

<article>
  <p id="status">File API & FileReader API not supported</p>
  <p><input type=file></p>
  <p>Select an image from your machine to read the contents of the file without using a server</p>
  <div id="holder"></div>
</article>
<script>
var upload = document.getElementsByTagName('input')[0],
    holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader === 'undefined') {
  state.className = 'fail';
} else {
  state.className = 'success';
  state.innerHTML = 'File API & FileReader available';
}
 
upload.onchange = function (e) {
  e.preventDefault();

  var file = upload.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
    var img = new Image();
    img.src = event.target.result;
    // note: no onload required since we've got the dataurl...I think! :)
    if (img.width > 560) { // holder width
      img.width = 560;
    }
    holder.innerHTML = '';
    holder.appendChild(img);
  };
  reader.readAsDataURL(file);

  return false;
};
</script>

Here's my modified code so you can change the width, and the height will automatically change to match it's aspect ratio by default.

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Image Viewer</title>
<meta name="Description" content="The Simple Open Source HTML5 Image Viewer">
<meta http-equiv="Content-Type" charset='utf-8' content="text/html;charset=ISO-8859-1">
<meta name="Keywords" content="html5, image, viewer">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
body {
   background-color:ivory;}
   
canvas#myimg {
   border:1px dashed red;}
</style>
</head>
<body>
<article>
  <p id="status">File API & FileReader API not supported</p>
  <p><input type=file></p>
  <p>Width and Height (px): <input type="text" id="width" style="width:100px;"><br>
  Choose width, & it'll maintain it's aspect ratio by default. You may need to choose a different file & revert back to make sure your changes have been added.</p>
  <p>Select an image from your machine to read the contents of the file without using a server</p>
  <div id="holder"></div>
</article>
<script>
var upload = document.getElementsByTagName('input')[0],
    holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader === 'undefined') {
  state.className = 'fail';
} else {
  state.className = 'success';
  state.innerHTML = 'File API & FileReader available';
}

upload.onchange = function (e) {
  e.preventDefault();

  var file = upload.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
	var w = parseInt($("#width").val());
    var img = new Image();
    img.src = event.target.result;
    // note: no onload required since we've got the dataurl...I think! :)
    if (img.width > w) { // holder width
      img.width = w;
    }
    holder.innerHTML = '';
    holder.appendChild(img);
  };
  reader.readAsDataURL(file);

  return false;
};
</script>
</body>
</html>

Codenstuff.com

Simple HTML5 Canvas Image Viewer

Simple HTML5 Canvas Image Viewer

Re: Simple HTML5 Canvas Image Viewer