Html img标签上的背景大小和背景位置

我有一个可以用JS库裁剪的图像。lib返回所选内容的x、y、宽度和高度

最初，逻辑只是几个上传的图像（在

中）并排放置，上面有一些编辑按钮，打开一个带有裁剪逻辑的弹出窗口。但是，现在规范将预览裁剪的内容

---

问题-是否有一种方法可以在不将所有

切换到

的情况下执行此操作，该模式将所有图像作为背景，并且可以移动和缩放以显示裁剪的部分？是否有类似的样式或其他可能的解决方法，我可以保留

标记

没有简单的方法。如果包含以下一个答案的链接，则表示同意。您可以使用javscript将部分图像渲染到画布上，然后使用我在下面（画布方法）下发布的答案将生成的图像设置为image tag src属性

同意的答复：

画布方法：

---

实现这一点的最佳方法是将任何html元素与css背景属性结合使用。在该属性中，可以将边距定义为用于定位和调整背景图像大小的大小。在您的情况下，该元素将具有裁剪库给定的宽度和高度。背景图像的位置将是x和y（也来自库），但会反转

使用哪个元素无关紧要，它可以是任何元素（请参阅），包括一个img标记，如图所示：

属性（例如，通过JavaScript）。否则，背景图像将不可见

尽管如此，我还是建议您使用JavaScript库/插件，而不是自己编写。有很多解决方案：






如果您不关心IE，您可以使用
对象拟合
和
对象位置
：

img{
对象匹配：覆盖；
对象位置：中上；
}
如何预览被裁剪的内容？裁剪过的物品会出现在另一张图片上吗？@SpencerWieczorek假设有一张300px x 500px的图片。用户需要位于中心的50px 50px部分。他选择了它，我将这个50px-50px部分（如果需要，拉伸它）放入原始图像容器中，这样用户就可以确定只使用了图像的这一部分。画布可能是你最好的选择。这不是确切的解决方案，但我从中学到了一些东西。最后重新写入并在图像中添加了一个额外的div。我将在图像显示错误时触发的所有图像上放置事件，因此当我删除“src”时，会显示错误，我不想覆盖它。虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-好啊我已经删除了链接。两行代码比很多单词要好得多。仅供参考-生活救世主。。。谢谢
<img border="0" style="display:block; width:120px; height:120px; background-color:red; padding:9px; background:url(http://www2.cnrs.fr/sites/communique/image/mona_unvarnish_web_image.jpg) no-repeat; background-position:-100px -40px;" />