#html #canvas
#HTML #холст
Вопрос:
Я искал — думаю, то, что я хочу сделать, невозможно, но подумал, что я бы проверил.
У меня есть несколько холстов на HTML-странице следующим образом: (эти идентификаторы приведены ниже)
- canvasMain — здесь будет отображаться увеличенная версия изображения
- canvasThumbnail1 — здесь будет отображаться уменьшенное изображение
- canvasThumbnail2 — то же, что и выше … и т.д.
У меня это работает, когда я рисую canvasMain содержимым миниатюры. Проблема в том, что, поскольку холст является немедленным, он копирует пиксели по мере их перехода на canvasMain из canvasThumbnail. В результате получается увеличенное пиксельное изображение.
Что я хочу сделать, это щелкнуть по одному из элементов canvasThumbnails и получить возможность использовать свойство Image.src в виде строки, а затем перенести это в canvasMain вместо фактического копирования пикселей с одного холста на другой. По сути, просто возьмите адрес (локальный или, скажем, на Flickr), откуда я могу загрузить изображение. Кажется, что при переносе изображения на холст оно хорошо масштабируется.
Из того, что я видел, я не думаю, что значение Image.src доступно через 2d-контекст. Я перечислил его свойства и нашел только вложенные объекты или возвраты собственного кода.
Я подумал, что если я нажму на canvasThumbnail, а затем использую (this) для получения ссылки на этот элемент canvas, а затем получу 2dcontext этого canvas, я смогу использовать свойство этого контекста для получения строки, представляющей значение Image.src.
Есть идеи? Спасибо
Ответ №1:
Каким-то образом вы нарисовали изображение на canvasThumbnail1 , предположительно, из элемента изображения (с высоким разрешением).
У canvasThumbnail1 или любого другого canvas, если уж на то пошло, нет памяти для объектов, нарисованных на нем. Итак, если вы рисуете большое изображение на крошечном canvasThumbnail, данные с высоким разрешением не существуют на этом крошечном canvas. Чтобы получить его, вы должны снова использовать исходное изображение, иначе вам придется рисовать на холсте большего размера с самого начала.
Другими словами, вместо того, чтобы рисовать эскиз на главном, вам нужно перерисовать элемент изображения (который вы использовали для создания эскиза) на главном.
Комментарии:
1. Да, это правильно. Я создал холст, затем получил контекст. Затем я создал объект image с помощью Image.src, который представлял собой изображение с высоким разрешением. По сути, я хочу иметь возможность создавать эскиз, а затем нажимать на него, чтобы отобразить его на холсте большего размера.
2. Итак, все, что вам нужно сделать, это оба раза рисовать из объекта Image
3. Да -правильно. Я создал холст, затем получил контекст. Затем я создал объект image с помощью Image.src, который представлял собой изображение с высоким разрешением, и нарисовал его на холсте. По сути, я хочу иметь возможность создавать эскиз, а затем нажимать на него, чтобы отобразить его на холсте большего размера. Я надеялся, что, возможно, было доступно свойство, которое позволило бы мне просто извлекать изображение из URI вместо копирования пикселей. Я провел с ним некоторое тестирование и увидел, насколько хорошо canvas может масштабировать изображение любого размера. Я просто хотел убедиться, что мне придется кодировать для этого самому. Спасибо.
4. Я думаю, я понимаю, о чем вы говорите — я могу вставить все изображения при загрузке страницы, а затем просто указать, на какую миниатюру щелкнули, чтобы отобразить соответствующий холст.