Есть страница, в которой JavaSvript рисует в Canvas некий рисунок.
Кроме этого рисунка на странице много что понаписано на PHP.
Нужно распечатать только рисунок, без остального мусора на странице.
Как это сделать?

Alt-PrtSc, вставить в фотошоп, вырезать ненужное, распечатать?

Страница, которая преднаначена для печати, обычно, специально формируется. Если хозяин страницы не пожелал делать такую опцию - остается фотошоп

В принципе, если речь идет о яваскрипт-решении и страница загружена в браузер, то можно написать букмарклет, вроде такогоОн откроет новую страницу и вставит изображения с канвасов как картинки, ну а картинки уже можно сохранить штатными инструментами браузера.

ЗЫ
Код проверял только в файрфоксе. На вот этой странице работает
http://www.w3schools.com/html/html5_canvas.asp
А вот на этой - не хочет
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
Но здесь канвас оказывается внутри фрейма, так что если открыть саму страницу фрейма
https://mdn.mozillademos.org/en-US/docs/Web...revision=726957
То на ней все заработает как следует.

Так пробовали?

Cтраница на моём сайте - могу всё что угодно делать.
В идеале хотелось бы кнопку с вызовом функции JavaScript, чтобы выскакивало что-то вроде диалога как при вызове window.print()

ksnk, принтскрин уже предлагал, но народ ленивый...

diadiavova, да, вариант, спасибо. Но, многовато действий + в новом окне не каждый догадается зайти в меню для распечатывания. Как бы без промежуточного окна обойтись...

Aliance, не осилил... можно поподробнее что это такое и что с этим делать?


Может быть есть способ сохранить содержимое канвы в каком-то контейнере (в области памяти, в файле...) и потом вызвать печать этого контейнера?

Да свободно можно обойтись. Код практически тот же( с некоторыми изменениями), просто я думал это тебе надо, а не на сайте. Ну собственно кнопочку делаешь, и по нажатию выполняешь код. Результат можно вставить в контейнер на странице или заранее разместить там картинку и просто передавать ей урл картинки.
Ну вот набросал пример, код для заполнения канваса стырил отсюда. 
Правда пока проверял, заметил, что в лисе канвас можно сохранить как изображение, просто в контекстном меню есть пункт "Сохранить изображение как...", а еще можно открыть изображение и тогда оно в новой вкладке откроется. В хроме и опере тоже есть возможность сохранить, так что такой код может понадобиться только для ИЕ

Ого... никогда не замечал, что можно канву сразу в картинку сохранять...

Приведённый код конечно приколен, но мне печать на принтере нужна, а не копирование. 
Либо я чего-то не вижу.

Это сообщение отредактировал(а) kuksha - 16.2.2015, 23:09

Я подумал, что проблема в канвасе, а с изображением проблем нет. Просто о печати мне ничего не известно  Но сохранить ведь изображение можно, а потом отпечатать - тоже не проблема. Да и открытие в отдельной вкладке вроде вполне решает проблему. Засунул туда изображение и печатай сколько влезет, не? :  

нет, это не то, я уже писал почему.

Ещё раз:
Нужна кнопка с привязанным скриптом печати на принтер содержимого канваса с данной страницы.
Aliance, поясните пожалуйста ваш способ - не понимаю...

Ну тогда вариант, предложенный Aliance, только с некоторыми изменениями. Если блоки схлопнуты с помощью display:none, то открыть канвас не получится из-за того, что скрыты родительские элементы. Надо сделать так
Ну и добавить кнопку

Так а что мешает при открытии окна вызвать window.print()?


Вы пробовали его? Ну или гуглили, что такое @media print?

Вы, мне кажется, не до конца уточнили детали задачи - кто должен печатать и при какиХ обстоятельствах? Если нужна кнопка, нажимая на которую пользователям предлагается вывести страницу на печать, где будет только канвас - то вот: http://jsfiddle.net/9f4msqej/ , стили можете взять выше, они более правильные.

Да я вроде подробно написал:
У меня есть сайт, на сайте страничка с ТЕКСТОМ и РИСУНКОМ который сделан сриптом JavaScript в Canvas.
Нужна кнопка на этой страничке, чтобы печатался только РИСУНОК, без ТЕКСТА, через вызов диалога печати.


Да, так и нужно, но что-то там не так прописано: 
Нажал на кнопку в этом примере - вызвался диалог печати, но в предварительном просмотре печати написано "Произошла ошибка предварительного просмотра печати".

Кстати, у меня не текстовый див:

а рисунок:

ну и далее в этот канвас "karta" всё рисуется скриптом... надеюсь это не помешает печати?

ПС: сейчас попробовать не могу, только вечером, но хотелось бы сейчас понять что в примере не так - вроде всё прозрачно, но что за ошибка...

Это сообщение отредактировал(а) kuksha - 17.2.2015, 13:05

Всё получилось!
Спасибо всем помогавшим! 

Вот только неприятность маленькая:
Вместе с рисунком на печать выводится реклама Гугл, которая вызывается гугловским же скриптом.
Как бы рекламу убрать?

CSS сделано так:

А рабочий черновик посмотреть можно здесь:
http://kosmoved.ru/nebo_segodnya_geo_14.php

Это сообщение отредактировал(а) kuksha - 17.2.2015, 14:14

kuksha, Для печати звездного неба лучше белый фон. Так что в этом случае - правильнее специальный канвас вставлять с картой и белым фоном. Из основного можно только центр и зум забрать

ksnk,  для печати в карте есть Ч/Б режим.
А вот как всё-же Гугл-рекламу убрать?

kuksha, а вот у меня отпечатался белый лист. Скорей всего из-за того, что в стиле прописан див, а не канвас и на канвас распространяется общее правило, заданное для тела. Пробовал в файрфоксе. Но заменил селектор #canvas-frame на #canvas-frame canvas и все заработало как надо.

diadiavova, очень странно, я смотрел в Хроме - несколько карт напечатал...
Но, послушался Вас и заменил сейчас CSS на:

Изменений не увидел - на предпросмотре всё точно как и было, но может быть в Фаерфоксе что-то изменилось?

и ещё эта реклама Гугловская... у кого есть соображения как её убрать?

Это сообщение отредактировал(а) kuksha - 17.2.2015, 14:58

Сейчас нормально. Перед тем, как писать, я сначала сам заменил селектор в файрбаге. 

В файрфоксе нет никакой рекламы, но хром может и выдает, это ж гугловский браузер 

Добавлено через 8 минут и 27 секунд
div#adunit{display:none} не срабатывает что ли? Это насчет рекламы.

Понятно, спасибо.
А рекламу я сам туда поставил, вот только непонятно откуда на печати она  взялась...

Поставил так:

 - всё равно реклама лезет...

Это сообщение отредактировал(а) kuksha - 17.2.2015, 16:10

Я в первый раз не заметил, но эта реклама во фрейме находится и из-за этого на нее не распространяются правила. Фрейм скрывать надо
#google-adds-frame1{display:none}


display:none работает так же, как visibility:collapsed, так что в данном случае правила противоречат друг другу. Выполнится какое-то одно, хотя в данном случае это вряд ли имеет значение.

Оба правила я поставил уже напоследок - пробовал их поочереди...

Заменил сейчас это правило на 
#google-adds-frame1{display:none}
не помогает...
#aswift_0_expand{display:none}
тоже не срабатывает

Это сообщение отредактировал(а) kuksha - 17.2.2015, 16:44

Там на самом деле ид google_ads_frame1, я просто написал с ошибкой.

Не, я до написания копировал имя фрейма напрямую со страницы (а здесь из топика скопировал..) - не работает...

Это сообщение отредактировал(а) kuksha - 17.2.2015, 17:24

kuksha, короче, первый вариант, который я предложил, содержал селектор body *, потом я отредактировал пост и заменил просто на body, но судя по всему с рекламой поможет справиться именно тот вариант.

УРА!!! 
Действительно, дело в звёздочке...


У меня правда почему-то 4 страницы для печати, хотя рисунок только на первой, но так видимо получается на основе общей высоты страницы. Ладно - пусть юзвери сами смотрят и редактируют...

Спасибо огромное!!!   

Там же в диалоге печати можно установить какие страницы надо на печать выводить.