Рисование нескольких изображений с помощью холста в технике вне экрана

Question

Я пытаюсь найти способ нарисовать несколько изображений, которые были извлечены из Facebook, и в объекте данных JSON, который стал довольно сложным, как только я получил их и сделал то, что мне нужно сделать, прежде чем они отобразятся.

Изображения представляют собой профильные фотографии, которые нужно обрезать с помощью ctx.clip (), чтобы сделать их кружками, а затем нарисуйте кольцо сверху, чтобы у них были разные цветовые границы в зависимости от типа друга или ж / д. , Это все готово, работает отлично. Я застрял в том, что использовал это, чтобы создать визуализацию данных и изображений fb, которые мы извлекаем, http://thejit.org,, и он анимирует изображение, когда загружается правильно. Поэтому, когда эти круглые картинки рисуются на холсте, примерно в 500 раз вызывается ctx.drawImage (), и это глупо. Что нужно сделать, это получить данные, создать временный холст и ctx, нарисовать каждое изображение на них, а затем нарисовать эти холсты на главном холсте, ТО запустите анимацию.

имеет смысл?

какие-нибудь советы или идеи о том, как это сделать?

Answer 1

Я думаю, что то, что вы описываете, описано в разделе Предварительный рендеринг на внеэкранный холст этого документа: http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-pre-render

Вы можете передать холст функции canvas.drawImage(). Это позволяет создавать холст вне экрана с помощью document.createElement("canvas"), выполнять некоторые операции рисования, а затем записывать содержимое изображения этого холста на основной (экранный) холст.

Answer 2

Я обнаружил, что проблема здесь, вероятно, вызвана медлительностью facebook и тем, сколько времени требуется Firefox версии 6 и ниже, чтобы установить соединение и вернуть необходимые данные, изображения моего профиля.

Мне также возвращают это для каждого изображения, которое я тоже запрашиваю, только в firefox idk почему, но, похоже, связано с безопасным соединением и взломом бла, изображений, facebook.бла ...

graph.facebook.com: сервер не поддерживает RFC 5746, см. CVE-2009-3555

Вкладка Net firebug показывает, что запрашивается каждое изображениезанимает 4,0 - 4,12 секунды для подключения и возврата.Это отсталый ... Срсли?В чем причина этого, фейсбук плохой или что-то в этом роде.Запрашивать изображения с других сайтов не сложно, когда они динамические и прочее.blargghh !!

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