Как изменить размер содержимого холста и получить измененные (и сжатые) данные base64 изображения?

Question

Я играю с canvas и создал демо-версию для рисования.

Теперь я могу рисовать вещи на этом холсте и получать данные с помощью .toDataURL().

Все идет отличнокроме данных изображение слишком велико.И мне просто нужна очень маленькая версия чертежа.

Есть ли способ (даже возможный), что я могу изменить размер холста к уменьшенной версии и загрузить данные изображения с измененным размером?Это похоже на сжатие изображения чистым JavaScript.

Например, я позволил пользователю рисовать на холсте 1000px * 500px и изменять его размер до 50px * 25px.Данные base64 с измененным размером будут очень маленькими и удобными для дальнейшей передачи по сети.Это то, что я хочу иметь.

Answer 1

Вы позволяете своему пользователю рисовать на большом холсте, а затем вы рисуете большой холст как изображение на маленьком холсте.Наконец, вы получаете маленькое изображение холста в качестве URI данных.

Маленький холст не нужно прикреплять к DOM.

let bigCanvas_img = document.querySelector("bigCanvas");
smallCanvas_ctx.drawImage(bigCanvas_img,0,0,smallCanvas_w,smallCanvas_h);


let url = smallCanvas.toDataURL();