<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" width="220" height="277"
src="https://spring.io/img/spring-logo-3b6f842fa77c3bea3bac17dbce36a101.png"
alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297"
style="border: 1px solid #d3d3d3;">
</canvas>
<button onclick="loadFun()">Add image</button>
<span></span>
<script>
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
}
function loadFun() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var dataURL = '';
try{
dataURL = ctx.toDataURL('image/jpeg', 1.0);
alert(dataURL);
}
catch(e){
alert(e+'');
}
console.log(dataURL)
}
</script>
<p>
<strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.
</p>
</body>
</html>
// Code goes here
/* Styles go here */