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

最初,逻辑只是几张上载的图像(在<img>中)并排放置,上面有一些编辑按钮,这些按钮会打开带有裁剪逻辑的弹出窗口。但是,现在该规范是要预览的内容。

问题-是否有办法做到,而无需将所有<img>切换为<div>,而<img>会将所有图像作为背景,并且可以移动和缩放以显示裁剪的部分?是否可以保留ojit_code标签,而不是使用这种样式或其他可能的解决方法?

最佳答案

实现此目的的最佳方法是将任何html元素与css background属性结合使用。在该属性中,您可以将边距定义为要定位和调整背景图像大小的尺寸。在您的情况下,该元素将具有您的裁剪库给定的宽度和高度。背景图像的位置将为x和y(同样来自库),但取反。

不管使用哪个元素都可以,可以是任何元素(请参见w3.org/TR/CSS2/colors.html),包括img标签,如following example所示:

<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;" />

请注意,如果您使用图片标签,则必须删除src属性(例如,通过JavaScript)。否则,背景图像将不可见。

尽管如此,我还是建议您使用JavaScript库/插件,而不要自己编写。有很多解决方案:
  • JCrop (jQuery Plugin)
  • ImageAreaSelect (jQuery Plugin
  • Uvumitools Crop (Mootools Plugin)
  • JS Cropper UI (Based on scriptacolous and prototype)
  • 关于html - img标签上的背景尺寸和背景位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27823986/

    10-12 12:40
    查看更多