IMG into CANVAS

Description

by nirmaljpatel

HTML

<table>
    <th>
<div>Image LinkedIn CrossSite HTTPS</div>
<img id="linImg" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/000/08e/1b0/0cf1ebb.jpg"></img>

<div>Image LinkedIn CrossSite HTTP</div>
<img id="linImgH" src="http://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/000/08e/1b0/0cf1ebb.jpg"></img>

<div>Image JSFiddle </div>
<img id="jsfImg" src="http://jsfiddle.net/img/initializing.png"></img>
    </th>
    <th>
<div id="canDivL">Canvas LinkedIn HTTPS</div>
<div id="canDivLH">Canvas LinkedIn HTTP</div>
<div id="canDivJ">Canvas JSFiddle</div>
    </th>
</table>

CSS

div canvas{
    display:block;
}

JavaScript

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
	var canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	canvas.getContext("2d").drawImage(image, 0, 0);

	return canvas;
}

var imgEleL = document.getElementById("linImg");
var divEleL = document.getElementById("canDivL");
var canEleL = convertImageToCanvas(imgEleL);
divEleL.appendChild(canEleL);

var imgEleLH = document.getElementById("linImgH");
var divEleLH = document.getElementById("canDivLH");
var canEleLH = convertImageToCanvas(imgEleLH);
divEleLH.appendChild(canEleLH);

var imgEleJ = document.getElementById("jsfImg");
var divEleJ = document.getElementById("canDivJ");
var canEleJ = convertImageToCanvas(imgEleJ);
divEleJ.appendChild(canEleJ);