У меня есть холст, используемый для редактирования фотографий. Я хочу сохранить фотографии в формате Full HD. Размер холста значительно ниже этого разрешения для просмотра на маленьком экране. Поэтому я применяю масштабирование на холсте, чтобы увидеть всю картину.
Как сохранить после редактирования изображение, видимое на холсте в Full HD?
Пример: отредактируйте изображение размера QHD (2560x1440) в размере холста SVGA (800x600) и создайте изображение Full HD (1920x1080)
Размер, который вы установите с помощью свойств ширины и высоты, будет окончательным размером изображения.
canvas.width = 1920; // actual size given with integer values
canvas.height = 1080;
Если вам нужно уменьшить масштаб на экране, вам нужно использовать CSS (один из тех особых случаев):
canvas.style.width = '960px'; // show at 50% on screen
canvas.style.height = '540px';
В качестве альтернативы используйте фактическое изображение в качестве холста за пределами экрана и копируйте области с него на холст на экране в зависимости от масштаба и т. д.
Если вы редактируете изображение с более низким разрешением, чем фактическое, то точка HD и т. д. исчезает, поскольку вам нужно увеличить изображение с более низким разрешением до большего, что сделает его более размытым из-за введенной интерполяции. Всегда работайте с фактическим целевым разрешением при работе с цифровыми изображениями (или видео).
Затем используйте toDataURL(), чтобы получить изображение:
var dataUri = canvas.toDataURL(); // saves a PNG at 1920x1080
для JPEG:
var dataUri = canvas.toDataURL('image/jpeg', 0.8); // last = quality
Просто имейте в виду, что позиции мыши должны масштабироваться в противоположном направлении, поскольку они относятся к элементу холста, а не к его растровому изображению.
