Как экспортировать изображение из масштаба, панорамирования fabric.js холста

Question

Я использую fabric.js рисовать элементы на холсте, Я использовал canvas.setZoom() и canvas.getZoom(), чтобы изменить размер холста, Я также использовал кастрюлю через canvas.relativePan() ,

Я хочу экспортировать элементы холста в качестве изображения, но функция экспорта экспортирует только те элементы, которые находятся на экране. Элементы, которые выведены из холста или увеличены до точки, которые больше не видны в текущем представлении, не экспортируются.

Я пробовал прокручивать элементы, чтобы получить минимальную (верхнюю и левую) точку и максимальную (ширину, высоту) точку и экспортировать toDataURL, используя эти параметры, но я до сих пор не могу получить скрытые элементы.

Можно ли экспортировать изображение без изменения параметров масштабирования и панорамирования?

Answer 1

Возможно, вы используете canvas.toDataURL(), где холст - это экземпляр ткани, а не элемент холста.

Если это не то, что вам нужно сделать.

Опорные функции различных параметров, но не в exclude zoom and pan это хорошо, так как экспорт в любом случае легко:

перед экспортом сохранить копию вашего viewportTransfrom, установить преобразование к единичной матрице, и восстановление после этого.

var transform = canvas.viewportTransform.slice(); 
canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; 
var dataurl = canvas.toDataURL(...your options....); 
canvas.viewportTransform = transform; 

Вы не должны использовать canvas.setViewportTransform() в этом случае, так как он сбросит все объекты, ограничивающие коробки и взаимодействий точек и, возможно, вы не хотите.

Вызов canvas.renderAll() перед экспортом не должно быть необходимости, но если она не работает, добавьте его прямо перед вызовом canvas.toDataURL()

viewportTransform 6 номера матрица, которая представляет ваш трансфокатор/панорамирование преобразования в целом.