شروع کار مقدماتی با HTML5 Canvas (جلسه 29) : ذخیره Canvas بصورت تصویر

canvas.toDataURL();

canvas.toDataURL('image/png');

canvas.toDataURL('image/jpeg', 0.7);

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';

ctx.fillRect(50, 50, 100, 100);

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';

ctx.fillRect(50, 50, 100, 100);

var dataURI = canvas.toDataURL();

console.log(dataURI);

<img src="data:image/png;base64,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">

<a href="data:image/png;base64,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">

  Download Image

</a>

<a download="square.png" href="data:image/png;base64,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">

  Download Image

</a>