При нажатии кнопки я получаю данные с canavas, с помощью метода toDataURL. Потом этот результат при нажатии на ссылки отображается в браузере
вот так:
data:image/png;base64,.......
Картинка отображается в браузере полностью. Можно её как нибудь уменьшить, сохранив пропорции в пикселях, и снова её отобразить?
data:image/png;base64,.......
Вот код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<script src="jquery-2.1.1.min.js"></script>
<script>
window.onload = function()
{
var canvas = document.getElementById("drawCanvas"),
context = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 600;
var img = new Image();
img.src = "darth_vader_star_wars.jpg";
img.onload = function()
{
context.drawImage(img, 0, 0);
}
$("#submitGraphic").click( function(){
var canvas = document.getElementById("drawCanvas");
var img = new Image();
img.src = "darth_vader_star_wars.jpg";
var context = canvas.getContext("2d");
var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
tempCanvas.width = 640;
tempCanvas.height = 480;
tCtx.drawImage(canvas,0,0);
var img = tempCanvas.toDataURL("image/png");
document.write('<a href="'+img+'"><img src="'+img+'"/>Пример</a>');
})
}
</script>
</head>
<body>
<canvas id="drawCanvas"></canvas>
<button id="submitGraphic">Click</button>
</body>
</html>