Я хотел бы преобразовать представление из директивы Angular в изображение, чтобы пользователь мог щелкнуть по нему правой кнопкой мыши и скопировать его в буфер обмена. В основном у меня есть директива, которая компилирует информацию в хороший шаблон Bootstrap со стилями, и я хотел бы иметь возможность щелкнуть правой кнопкой мыши, скопировать в буфер обмена и вставить в документ как тип img.

Представить:

<div class="fancyCss">
    <MyCustomHeaderDirective2 dataVal="foo"></MyCustomHeaderDirective2>
    <MyCustomBodyDirective2>
       <div class="row">
        <- Content ->
    </MyCustomBodyDirective2>
</div>

Итак, на странице они загружают правильный "foo", видят красивую таблицу, щелкают правой кнопкой мыши и вуаля, jpg таблицы в вашем буфере обмена. В настоящее время процесс рендеринга, достаньте инструмент для обрезки, щелкните и перетащите, скопируйте, вставьте.

Для ясности: возможно ли это? Есть ли для этого библиотека? Самое главное, как мне реализовать это с помощью директивы angular?

1
Seth 6 Янв 2016 в 17:27

2 ответа

Лучший ответ

Если вы ищете чисто клиентское решение: https://html2canvas.hertzen.com/

В качестве альтернативы для более настраиваемого и надежного решения вы можете передать DOM со встроенным стилем на серверную сторону и отобразить его с помощью phantomJS. Сделайте снимок, сохраните его как изображение и отправьте обратно клиенту.

1
Yerken 6 Янв 2016 в 14:35

Имеется библиотека

http://hertzen.com/experiments/jsfeedback/

http://html2canvas.hertzen.com/

Как это работает

  1. Он захватывает содержимое html dom и вставляет его в холст
  2. В Canvas вы можете конвертировать контент в формат изображения
0
krishnakumar sekar 6 Янв 2016 в 19:37