1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sauvegarder un canvas</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {margin:0;padding:0;}
body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
h1 {font-size:1.5em;}
P {margin:20px 0 5px 0;}
</style>
</head>
<body>
<h1>Sauvegarder un canvas</h1>
<p>canvas</p><canvas></canvas>
<p>image tirée du data URL</p><img title="surprise" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAC9klEQVR4nO3QsYlEQRBDwZ9/0nspPMYR1xSiPBlC3/f9fgD/w3wAQDUfAFDNBwBU8wEA1XwAQDUfAFDNBwBU8wEA1XwAQDUfAFDNBwBU8wEA1XwAQDUfAFDNBwBU8wEA1XwAQDUfAFDNBwBUtXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXe1eCXzw4F3tXgl88OBd7V4JfPDgXfzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HAFTzAQDVfABANR8AUM0HADR/jHJE84A88/cAAAAASUVORK5CYII=" />
<p>décommenter la dernière ligne du code javascript pour obteir le data URL.</p>
<script type="text/javascript">
var ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'rgb(0, 0, 255)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(10, 20, 50, 50);
//window.location = ctx.canvas.toDataURL('image/png');
</script>
</body>
</html> |
Partager