使用Javascript复制和裁剪图像

我正尝试在Javascript/Canvas中创建一个由几个动画图形组成的小型2D游戏。我想减少HTTP请求的数量，所以我将每帧动画（32像素×32像素）组合成一个图像（比如192像素×128像素）。有没有什么办法可以将客户端的这些图像复制并剪切成几个较小的图像？这将大大简化我的渲染代码，并有助于减少网络延迟造成的加载时间。使用Javascript复制和裁剪图像

来源

2010-11-17 Nick Meharry

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

来源

2010-11-17 00:17:22

我以前没有见过，我会研究它。谢谢。 – 2010-11-17 00:26:43

HTML5 Canvas API提供了一个名为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

来源

2010-11-17 00:19:25 mike

这实际上是我现在正在做的。我只是想知道在绘制图像之前是否有办法裁剪图像以简化渲染代码。 – 2010-11-17 00:25:55

如果你唯一的担心是简单的代码，你可以将图像数据封装到一个可重用的对象，如下所示：https://gist.github.com/702799 – mike 2010-11-17 00:36:08

我仍在努力，但给你一个想法我在哪里，这里是源：http://bitbucket.org/bluejeansummer/rpgsite/src/tip/media/js/rpg.js – 2010-11-17 01:00:04

如果你不想使用帆布或第三方库中，您可以将图像添加到剪裁版本大小的div（带有“overflow：hidden”），并为图像提供负左上边距。
每一个都会带有整个图像，但只会显示其中的一部分，这可能（或不会）影响性能。我相信你可能不得不给予div元素一个位置：相对以及让IE开心。

或者，您可以将图像指定为div的背景，并指定backgroundPosition。我似乎记得这不适合我曾经做过的事情，不知道为什么。（我认为它与不透明度有关）

来源

2010-11-17 00:24:10 rob

鉴于这个问题是在创建JavaScript /帆布游戏的环境中提出的，我不确定这是否完全相关？ – 2010-11-17 00:40:54

够公平的，我想我认为画布被提及是因为他认为这是必要的。但是，是的，画布很容易复制图像的一部分，我想知道为什么需要pixastic库.... – rob 2010-11-17 00:44:10

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

来源

2012-01-25 10:50:24

使用Javascript复制和裁剪图像

回答

相关问题