Есть страница, в которой 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,  для печати в карте есть Ч/Б режим.
А вот как всё-же Гугл-рекламу убрать?