hanafiah · January 9, 2013 23:26
diff --git a/image to canvas.php b/image to canvas.php
 <!DOCTYPE HTML>
 <html>
    <body>
        <?php
        $img = 'http://www.saudigazette.com.sa/myfiles/Images/2012/12/18/li02.jpg';
        $type = pathinfo($img, PATHINFO_EXTENSION);
        $data = file_get_contents($img);
        $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

        ?>
        Image
        <img src="<?php echo $img;?>" />
        <hr>
        Using Base64 Image
        <img src="<?php echo $base64; ?>" />

        <hr>
        Using Canvas
        <canvas id="myCanvas" width="578" height="500"></canvas>
        <script>
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            var imageObj = new Image();

            imageObj.onload = function() {
                context.drawImage(imageObj,0,0);
            };
            imageObj.src = '<?php echo $base64; ?>';
        </script>
    </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<body>
	<?php
	$img = 'http://www.saudigazette.com.sa/myfiles/Images/2012/12/18/li02.jpg';
	$type = pathinfo($img, PATHINFO_EXTENSION);
	$data = file_get_contents($img);
	$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

	?>
	Image
	<img src="<?php echo $img;?>" />
	<hr>
	Using Base64 Image
	<img src="<?php echo $base64; ?>" />

	<hr>
	Using Canvas
	<canvas id="myCanvas" width="578" height="500"></canvas>
	<script>
	var canvas = document.getElementById('myCanvas');
	var context = canvas.getContext('2d');
	var imageObj = new Image();

	imageObj.onload = function() {
	context.drawImage(imageObj,0,0);
	};
	imageObj.src = '<?php echo $base64; ?>';
	</script>
	</body>
	</html>