Simple HTML5 Canvas Image Viewer

2 posts Page 1 of 1
Post Reply
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am
Simple HTML5 Canvas Image Viewer
mikethedj4
Post Options:
Quote
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
html5imageviewer.zip
You do not have the required permissions to view the files attached to this post.
Last edited by mikethedj4 on Sun Jun 02, 2013 10:56 pm, edited 2 times in total.
Top
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am
Re: Simple HTML5 Canvas Image Viewer
mikethedj4
Post Options:
Quote
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>
Top
Post Reply
2 posts Page 1 of 1
Return to “Tutorials”

Copyright Information

Powered by phpBB® Forum Software © phpBB Limited Privacy | Terms

Copyright © Codenstuff.com 2020 - 2023