Canvas.toDataURL не видит фильтры?

@Firework · Регистрация: 01.04.2013

Author24 — интернет-сервис помощи студентам

CSS

div {
            width:200px;
            background-color: green;
        }

Javascript

function downimg(){
            html2canvas($('#downimg'), {
                onrendered: function (canvas) {
                     var img = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream");
 
                     window.location.href = img;                     
                }
            });
        }

HTML5

    <script type="text/javascript" src="html2canvas.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
    <div id="downimg">
        <div>
            some text  <img src="123.jpg"/>
        </div>
    </div>
    <a href="javascript:void(0)" onClick="downimg()" >SAVE</a>
</body>

Нашёл такой код. Всё нормально сохраняет. Но если я добавлю стиль -webkit-filter: contrast(2.5), то сохраняет изображение так, будто этого фильтра нет.
Хотя если написать

CSS

div {
            width:200px;
            background-color: green;
            opacity: 0.2;
        }

то сохраняет такое же прозрачное изображение как в браузере.

@Eva Rosalene · 08.08.2014, 17:18

Firework, фильтры css на сам канвас не влияют. Они применяются только в момент отображения его самого в браузере.

Добавлено через 28 секунд

Сообщение от Firework

то сохраняет такое же прозрачное изображение как в браузере.

Странно. Сейчас протестирую.

Добавлено через 9 минут
Протестировал. Сохраняет изображение без фильтра в обоих случаях.

@Firework · 08.08.2014, 17:23 **[ТС]**

Сообщение от FraidZZ

Протестировал. Сохраняет изображение без фильтра в обоих случаях.

У меня всё же сохраняет с опасити.
А как можно тогда изменить яркость блока на странице и сохранить этот блок тогда?

@Eva Rosalene · 08.08.2014, 17:31

Firework, я как-то сразу не вчитался в тему. Обождите, пока пойму

Добавлено через 2 минуты
Firework, вот документация на html2canvas:

How it works

The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page. In other words, it does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.

Вольный перевод выделенного:

скрипт на самом деле не снимает скриншот страницы, а строит её представление на основании данных, полученных из DOM.

Так что неподдерживание скриптом какого-либо свойства CSS - норма

И вопросы тут скорее к его автору.

@Eva Rosalene Модератор 5198 / 2080 / 406 Регистрация: 06.01.2013 Сообщений: 4,794
	08.08.2014, 17:18	2
	Firework, фильтры css на сам канвас не влияют. Они применяются только в момент отображения его самого в браузере. Добавлено через 28 секунд Сообщение от Firework то сохраняет такое же прозрачное изображение как в браузере. Странно. Сейчас протестирую. Добавлено через 9 минут Протестировал. Сохраняет изображение без фильтра в обоих случаях. 0

@Firework 102 / 93 / 36 Регистрация: 01.04.2013 Сообщений: 654
	08.08.2014, 17:23 [ТС]	3
	Сообщение от FraidZZ Протестировал. Сохраняет изображение без фильтра в обоих случаях. У меня всё же сохраняет с опасити. А как можно тогда изменить яркость блока на странице и сохранить этот блок тогда? 0

@Eva Rosalene Модератор 5198 / 2080 / 406 Регистрация: 06.01.2013 Сообщений: 4,794
	08.08.2014, 17:31	4
	Firework, я как-то сразу не вчитался в тему. Обождите, пока пойму Добавлено через 2 минуты Firework, вот документация на html2canvas: How it works The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page. In other words, it does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM. Вольный перевод выделенного: скрипт на самом деле не снимает скриншот страницы, а строит её представление на основании данных, полученных из DOM. Так что неподдерживание скриптом какого-либо свойства CSS - норма И вопросы тут скорее к его автору. 1