Создание растровой копии элемента с помощью canvas
Я создал простую программу верстки страниц для клиента и хотел бы предоставить представление миниатюр страниц, как палитра страниц в InDesign. Можно ли использовать элемент HTML5 canvas для создания копии одного элемента?
Например, каждая страница является тегом статьи. Я хочу скопировать эту статью с помощью canvas и уменьшить ее до 10%, а затем нарисовать ее на экране.
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