Как скачать картинку с сайта, чтобы она не была корявой?

Question

[FronzZ]

Всем привет! Хотелось бы узнать есть ли кто знает, как скачать картинку с сайта на которой как бы стоит защита или что то вроде этого... Ситуация такова что при попытке скачать изображение ( через консоль да как угодно) она скачивается в виде мозаики как бы пикселями (пробовал разные браузеры не помогает). При чем на самом сайте изображение адекватное и читабельное.
P.S Это уже личное ( реально стало интересно как это делается).

Comments

[Вадим]

Волшебный шар по пятницам не работает.
Откуда качать?

[FronzZ]

Вадим, Sorry забыл указать) https://reshutka.ru/4klass/okruzhayuschiy-mir/note...

Answer 1

[Вадим]

1) Находите картинку в разметке с помощью инструментов разработчика (или правой кнопкой по картинке -> просмотреть код):

2) Выше картинки есть элемент canvas.
3) Нажимаете на него мышкой, после чего открываете console, и вводите в неё:

var d = $0.toDataURL("image/png"); // $0 - ссылка на элемент canvas из-за того, что кликнули на него мышкой. можете заменить $0 на поиск элемента по id. document.getElementById('answer')
var w = window.open('about:blank','image from canvas');
w.document.write("<img src='"+d+"' alt='from canvas'/>");

4) Нажимаете enter.
5) Откроется новая вкладка с картинкой.
6) Сохраняете.
7) Профит.

UPD: Способ 2 - по проще.
1. Нажимаем так же правой кнопкой по картинке - посмотреть код
2. Когда откроются инструменты разработчика и картинка подсветится нажимаем delete
3. Снова нажимаем правой кнопкой на картинке -> сохранить как
4. Готово :-)

реально стало интересно как это делается

В разметке приходит граммотно предзаготовленная картинка, нарезанная на блоки определённого размера.
В css картинка прозрачная.
JavaScript берёт эту картинку, перетасовывает её части в нужном порядке и отрисовывает на canvas.
Это лишь моё предположение, но так оно и есть 100%.
Очень хитро :-)

Comments

[FronzZ]

Cпасибо Конечно, но я масленок в этом. И не совсем понимаю куда вводить это ни какая консоль не открывается...

[Вадим]

FronzZ, Хорошо, давайте более подробно и более простыми шагами:
1. Нажимаете на картинке правкой кнопкой мышки.
2. Если Вы в хроме, то в контекстном меню будет пункт внизу "Посмотреть код"
3. Откроются инструменты разработчика. Будут выглядеть как на скриншоте в ответе.
4. Там есть вкладка "console"

5. Переходите в console (Нажимаете на эту вкладку)
6. Получите примерно следующее:

7. Внизу картинки есть синяя стрелочка. Нажимаете справа от неё. установив туда каретку.
8. Копируете этот код:

var d = document.getElementById('answer').toDataURL("image/png");
var w = window.open('about:blank','image from canvas');
w.document.write("<img src='"+d+"' alt='from canvas'/>");

9. Вставляете туда в консоль, после синей стрелочки снизу. И нажимаете enter.
10. Откроется новая вкладка в браузере.
11. Нажимаете правой кнопкой
12. "Сохранить картинку как"
13. Сохраняете.
14. Готово :-)

[FronzZ]

Вадим, Я конечно извиняюсь, но Вы чертов гений!!
Спасибо!!! Стоило же так заморачиваться с этой фоткой. Вообще не понятно нафиг на нее такая защита)

[Вадим]

FronzZ, Ну, видимо, защита для сохранения уникальности контента. А это важно.

[Вадим]

FronzZ, Нашёлся способ ещё проще)
1. Нажимаем так же правой кнопкой по картинке - посмотреть код
2. Когда откроются инструменты разработчика и картинка подсветится нажимаем delete
3. Снова нажимаем правой кнопкой на картинке -> сохранить как
4. Готово :-)

[FronzZ]

Вадим, Действительно, так даже проще. Огромное Спасибо!