Сохранение изображения, нарисованного на холсте
У меня есть простое HTML-приложение, в котором я могу рисовать на холсте HTML5. У меня есть кнопка сохранения, где я делаю снимок с помощью canvas.todataURL. Когда я открываю эту ссылку в веб-браузере, отображается не весь рисунок, а только часть рисунка. Ниже мой код. Попробуйте, это не имеет смысла.
JSFIDDLE: https://jsfiddle.net/v0a2Lfsk/1/
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>
var mousePressed = false;
var lastX, lastY;
var ctx;
$(window).on('load', function() {
canv = document.getElementById('myCanvas');
ctx = canv.getContext("2d");
canv.width = $(window).width();
canv.height = 1000;
$('#myCanvas').mousedown(function (e) {
mousePressed = true;
//Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
Draw(e.pageX, e.pageY, false);
});
$('#myCanvas').mousemove(function (e) {
if (mousePressed) {
//Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
Draw(e.pageX , e.pageY , true);
}
});
$('#myCanvas').mouseup(function (e) {
mousePressed = false;
});
$('#myCanvas').mouseleave(function (e) {
mousePressed = false;
});
});
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.lineWidth = $('#selWidth').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
function next(){
var canvas = document.getElementById('myCanvas');
var image = canvas.toDataURL("image/png"); // here is the most important part because if you dont replace you will get a DOM 18 exception.
console.info(image);
// html2canvas(document.querySelector("#myCanvas")).then(canvas => {
// document.body.appendChild(canvas);
// alert("dasds");
// });
}
function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
</script>
<body>
<canvas id = "myCanvas"></canvas>
<div class = "controls">
<button onclick = "javascript:clearArea();return false;">Clear Area</button>
<button onclick = "javascript:next();return false;">Save (Print to Console Log)</button>
<!-- Line width : <select id = "selWidth">
<option value = "1">1</option>
<option value = "3">3</option>
<option value = "5" selected = "selected">5</option>
<option value = "7">7</option>
<option value = "9">9</option>
<option value = "11">11</option>
</select>
Color : <select id = "selColor">
<option value = "black">black</option>
<option value = "blue" selected = "selected">blue</option>
<option value = "red">red</option>
<option value = "green">green</option>
<option value = "yellow">yellow</option>
<option value = "gray">gray</option>
</select> -->
</div>
</body>
<style>
body{
overflow:hidden;
}
#mycanvas
{
background-color:#fff;
position:absolute;
*/ background-repeat: no-repeat;
}
.controls
{
position:absolute;
top:0px;
right:0px;
width: 600px;
background-color:#2277dd;
padding:5px;
margin:2px;
color:#fff;
-webkit-border-radius: 3px;
border-radius: 3px;
}
</style>
@FeaturedSpace Да, я это сделал и ТОЧНО следовал их коду. И все же это не сработало.
Если я не ошибаюсь, я получаю полное изображение, когда копирую вывод консоли и вставляю его в Chrome 74 на своем Mac.
var image = canvas.toDataURL("image/png"); И вы знаете, что это возвращает значение в кодировке base64, верно?
Какой?? Ни за что. Я также на Mac и на Chrome 74.
Вы нарисовали большое изображение? Что происходит со мной, так это то, что я получаю только верхнюю часть изображения.
@FeaturedSpace Да, я знаю, что это значение в кодировке base64. Я поместил это в свой URL-адрес браузера, чтобы посмотреть, как это выглядит.
Попробуйте отобразить его, фактически выведя HTML? Может браузер неправильно интерпретирует
О чувак. Я только что понял это. Я никогда не нажимал кнопку "Показать больше"
да. Черный квадрат — скриншот результата. imgur.com/a/TtzZgJL
Если кто-то хочет добавить ответ, я приму его. Я не заметил кнопку Показать больше. Я просто скопировал подраздел. АГРГГГРГ
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Убедитесь, что вы нажали кнопку «Показать больше» на вкладке «Консоль» инструментов разработчика, иначе вы можете скопировать только часть выходной строки (согласно комментарию asdadsads).
В некоторых случаях показ обрезанной строки base64 приведет к сообщению об ошибке, а в других (например, у вас) будет отображаться часть изображения.
В качестве альтернативы просто используйте кнопку «Копировать», которая скопирует весь вывод.
Я настоятельно рекомендую ознакомиться с документацией по этому поводу: developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…