Создание растровой копии элемента с помощью canvas


Я создал простую программу верстки страниц для клиента и хотел бы предоставить представление миниатюр страниц, как палитра страниц в InDesign. Можно ли использовать элемент HTML5 canvas для создания копии одного элемента?

Например, каждая страница является тегом статьи. Я хочу скопировать эту статью с помощью canvas и уменьшить ее до 10%, а затем нарисовать ее на экране.

2 3

2 ответа:

В спецификации canvas нет текущего метода создания снимков частей страницы. Firefox расширяет элемент canvas с помощью метода, называемого вытяжное окно(), который принимает координаты и размеры области, которую вы хотите сфотографировать. Однако этот метод доступен только для сценариев, работающих с привилегиями уровня chrome из-за проблем безопасности. Комментарий к методу в коде указывает, что это может измениться в коде. будущее:

// We can't allow web apps to call this until we fix at least the
// following potential security issues:
// -- rendering cross-domain IFRAMEs and then extracting the results
// -- rendering the user's theme and then extracting the results
// -- rendering native anonymous content (e.g., file input paths;
// scrollbars should be allowed)

Http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352

Хотя это не использует canvas в Firefox 4+, можно использовать любой HTML-элемент в качестве фонового изображения другого элемента. Подробности здесь: https://developer.mozilla.org/en/CSS/-moz-element