JavaScript (HTML5): 画像を画面に表示

snippet-image

javascript: snippet-image.js

(function(){
	function SnippetImage() {
	};
	SnippetImage.prototype.addImage = function() {
		var image = new Image();
		image.src = "sample.png";
		document.body.appendChild(image);
	};
	SnippetImage.prototype.drawToCanvas = function() {
		var canvas = document.createElement("canvas");
		canvas.width = 250;
		canvas.height = 250;
		var context = canvas.getContext("2d");
		var image = new Image();
		image.src = "sample.png";
		context.drawImage(image, 0, 0);
		document.body.appendChild(canvas);
	};
	function loaded() {
		this.snippet = new SnippetImage();
		this.snippet.addImage();
		
		// currently, only firefox. (2013/01/03).
		this.snippet.drawToCanvas();
	};
	if(document.addEventListener){
		document.addEventListener("DOMContentLoaded", loaded, false);
	} else if(/msie/.test(navigator.userAgent.toLowerCase())){
		try {
			document.documentElement.doScroll("left");
		} catch(error){
			setTimeout(arguments.callee, 0);
			return;
		}
		loaded();
	}

}).call(this);