用JavaScript获取部分图像

是否可以通过JavaScript在img标记（带有像素）显示图像的任何部分？我会准备一个大的图像（例如32x320像素）和定义的起始位置（X，Y，例如0.32）和宽度/高度（例如32,32），并希望脚本显示第二个（例如， 32x32像素）主图像的一部分。用JavaScript获取部分图像

来源

2010-04-04 Alper

[我怎样才能在HTML/CSS中显示图像的一部分？]（https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion- html-css） – vaxquis 2017-07-07 20:06:35

虽然引用的问题是关于html/css，但这是针对JavaScript的。 – Alper 2017-07-07 20:14:20

您是否知道，因为您的问题隐含在JavaScript DOM中，并且DOM本身只是HTML/CSS的编程后端，您的问题*是关于HTML/CSS本身的？这里接受的答案指出了CSS的原因。 *不考虑HTML/CSS就不能*执行JS DOM *甚至在其他答案中提到的HTML5 canvas元素也只是一个HTML5文档元素。 – vaxquis 2017-07-07 20:40:35

您可以使用CSS属性为此并通过JS更改它们。将图像设置为具有所需大小的元素的背景，并使用背景位置调整其位置，以使其正确部分可见。有人称之为CSS sprites。

来源

2010-04-04 14:41:11

+1你甚至不需要使用DIV。我使用透明的PNG并设置了它的背景图像，这同样适用于这个目的，但是如果我想不必处理浮动图像等，我可以选择使用内联工件。 – Robusto 2010-04-04 14:59:50

是的，自然这适用于任何元素。使用img元素听起来有点脏，但我可能会使用display：inline-block;如果我想让元素与文本一起流动。 – 2010-04-04 15:08:09

为了给您提供多种选择，您可以随时使用HTML5画布并根据需要重新绘制图像。你可以在这里找到一个很好的教程：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images 尽管如此，IE浏览器还是不支持canvas，但CSS sprite方法会更好。

来源

2010-04-04 14:48:44

您甚至可以将您绘制的图像保存为数据网址http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/ – 2014-07-23 03:24:54

用JavaScript获取部分图像

回答

相关问题