代码之家 › 专栏 › 技术社区 › Cassie Meharry

用Javascript复制和裁剪图像

crop client-side canvas javascript

8

Cassie Meharry · 技术社区 · 14 年前

我试图在Javascript/Canvas中创建一个小的2D游戏,它由几个动画精灵组成。我想减少HTTP请求的数量,所以我将每帧动画(32px乘以32px)合并为一个sprite图像(比如,192px乘以128px)。有什么方法可以复制和裁剪这些图像客户端回到几个较小的图像?它将大大简化我的渲染代码,并有助于减少由于网络延迟而导致的加载时间。

4 回复 | 直到 14 年前

1

4

Matt Ball 14 年前

看一看 Pixastic ,特别是 http://www.pixastic.com/lib/docs/actions/crop .

2

36

mike 14 年前

HTML5CanvasAPI提供了一个名为drawImage的方法,允许您裁剪输入图像。

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

alt text

有关详细信息,请参见规范(该图像直接从规范中获取):

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

3

1

Cris Stringfellow 13 年前

只需在样式属性显示设置为隐藏的img标记中加载图像。然后裁剪屏幕外画布上的图像,然后根据需要将该屏幕外画布写入主画布。

4

0

rob 14 年前

如果不想使用canvas或第三方库,可以将图像添加到裁切版本大小的div(带“overflow:hidden”)中,并为图像提供负的左边距和上边距。
每一个都将携带整个图像,但只显示其中的一部分,这可能影响性能,也可能不影响性能。我相信你可能需要给div元素一个位置:相对的也要让IE开心。

或者,可以将图像指定为div的背景,并指定backgroundPosition。我好像记得这件事对我曾经做过的事情没有用,不知道为什么。(我认为这与不透明有关)