Получить значение атрибута src для элемента HTML5 canvas

Question

Я искал - думаю, что то, что я хочу сделать, невозможно, но подумал, что проверю.

У меня есть несколько холстов на странице HTML следующим образом: (это идентификаторы ниже)

• canvasMain - это будет отображать большую версию изображения
• canvasThumbnail1 - это будет отображать уменьшенное изображение
• canvasThumbnail2 - то же, что и выше ...etc

У меня это работает, когда я рисую canvasMain с содержимым эскиза.Проблема состоит в том, что поскольку canvas является немедленным, он копирует пиксели по мере их перехода к canvasMain из canvasThumbnail.В результате получается увеличенное пиксельное изображение.

Я хочу щелкнуть мышью по одному из canvasThumbnails и получить свойство Image.src в виде строки, а затем перетащить его в canvasMain вместо фактического копирования.пикселей с одного холста на другой.По сути, просто взять адрес (локальный или, скажем, на Flickr), откуда я могу получить изображение.Вытягивание изображения на холст, кажется, хорошо его масштабирует.

Из того, что я видел, я не думаю, что значение Image.src доступно через 2d-контекст.Я перечислил через его свойства и нашел только вложенные объекты или возвраты нативного кода.

Я подумал, что если я нажму на canvasThumbnail, а затем использую (this), чтобы получить ссылку на этот элемент canvas, а затем получить 2dcontext этого холста, я смогу использовать свойство этого контекста дляполучить строку, которая представляет значение Image.src.

Есть идеи?Спасибо

Answer 1

Каким-то образом вы нарисовали изображение на canvasThumbnail1, предположительно из элемента изображения (с высоким разрешением).

На canvasThumbnail1, или на любом другом холсте по этому вопросу, нет памяти на нарисованных на нем вещах.Поэтому, если вы рисуете большое изображение на крошечном холсте, данные с высоким разрешением не существуют на этом крошечном холсте.Чтобы получить его, вы должны снова использовать исходное изображение, иначе вы должны нарисовать более крупный холст с самого начала.

Другими словами, вместо того, чтобы рисовать миниатюру на главном, вам нужно перекрасить элемент Image (что вы использовали для создания эскиза) на главную.