В этом разделе настраиваем возможность очистки и загрузки образа.
Очистка изображения
Очистить изображение просто: нужно нарисовать белый квадрат по всему холсту. Вот кнопка, которая находится под кнопками формы.
<div>
<button onclick="canvas.clear()">Clear</button>
</div>
А вот метод, который нужно добавить в класс Canvas:
clear() {
this.ctx.clearRect(0, 0, 500, 500);
}
Загрузка образа
Загрузка нарисованного изображения также проста в реализации, но может быть запутанной для понимания. Добавьте HTML-код прямо под кнопкой «Очистить» в тот же раздел ‹div›, что и выше:
<button onclick="canvas.download()">Download</Button>
И метод:
download() {
const image = this.canvas.toDataURL('image/png', 1.0);
image.replace('image/png', 'image/octet-stream');
const link = document.createElement('a');
link.download = 'canvas-image.png';
link.href = image;
link.click();
}
Вы когда-нибудь открывали изображение в новой вкладке, а в адресной строке было указано «data:image/png;base64», за которым следовала длинная строка цифр и букв? Это то, что генерирует toDataURL. Таким образом, первые две строки преобразуют рисунок холста во что-то загружаемое. Остальная часть функции создает тег ‹a›, который мы программно щелкаем, чтобы запустить загрузку.
Собираем вместе
Поскольку это короткий раздел, я подозреваю, что вы можете понять, где должен быть код. Мы закончим скриншотом того, как должно выглядеть приложение на этом этапе, и продолжим в следующем разделе, начав работу с сокетами.
