Копировать и обрезать изображения в Javascript

Question

Я пытаюсь создать небольшую 2D-игру на Javascript / Canvas, которая состоит из нескольких анимированных спрайтов.Я хотел бы сократить количество HTTP-запросов, поэтому я объединил каждый кадр анимации (32 на 32 пикселя) в одно изображение на спрайт (например, 192 на 128 пикселей).Можно ли как-то скопировать и обрезать эти изображения на стороне клиента в несколько небольших изображений?Это значительно упростит мой код рендеринга и поможет сократить время загрузки из-за задержки в сети.

Answer 1

HTML5 Canvas API предоставляет метод drawImage, который позволяет обрезать входное изображение.

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Для получения дополнительной информации см. Спецификацию (это изображение взято непосредственно из спецификации):

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#images

Answer 2

Посмотрите на Pixastic , в частности http://www.pixastic.com/lib/docs/actions/crop.

Answer 3

Просто загрузите изображение в тег img с атрибутом отображения стиля, установленным на скрытый. Затем обрежьте изображение на внеэкранном холсте, а затем запишите это за пределами экрана на основной холст, как требуется.

Answer 4

Если вы не хотите использовать холст или стороннюю библиотеку, вы можете добавить изображение в div (с «overflow: hidden») размера обрезанной версии и придать изображению отрицательное левое и верхнее поля.
Каждое изображение будет нести все изображение целиком, но будет просто отображать его часть, что может, а может и не повлиять на производительность.Я полагаю, что вам, возможно, придется присвоить элементу div положение: также относительно, чтобы сделать IE счастливым.

В качестве альтернативы вы можете назначить изображение в качестве фона для div и указать backgroundPosition.Кажется, я помню, что это не сработало для чего-то, что я делал однажды, не знаю почему.(Я думаю, что это было связано с непрозрачностью)