裁剪图像 - 透明度

Question

我试图用图像裁剪“框架”来制作页面。在下面的评论是jFiddle（虽然提交按钮不起作用）....我想做的是图像的一部分，不在裁剪框架，应该是透明的，所以用户可以看到，图像的哪一部分被裁剪。到目前为止，我的谷歌搜索没有任何结果......：/你能帮助我如何做到透明度吗？

Answer 1

这是另一种方法：

你需要两个div，一个在另一个上面，大小相同。 div 1将“返回”（z-index：-1）div 2将位于“front”（z-index：1）

Div 1将成为您图像的容器。使用jquery，改变div 1的background-image属性，根据鼠标移动给出特定的x和y。

Div 2将位于其上方，并且将具有正方形尺寸的正方形图像作为背景，其中正方形将是透明的并且被半透明边框包围。我为你的例子做了一个图像：

检查这个小提琴http://jsfiddle.net/gTZQv/2/

你只需要根据图像尺寸示例初步“居中”div1的背景图像：图像的背景位置将是（不要错过减号“ - ”符号;）

backgroundX = -(loaded_image_width / 2) + (div1width/2) 
backgroundY = -(loaded_image_height / 2) + (div1height/2) 

所以css就像（当然不是实际代码）

background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg') [backgroundX]px [backgroundY]px;

并通过jquery只需更改这些值，以便可以使用鼠标拖动图像

更新 - 代码：

这是一个开始：

http://jsfiddle.net/ztvyY/6/

因为我不想重新编写你的代码，我使用3个div，彼此重叠，第一个将图像作为背景。第二个有透明边框，第三个只是一个空的1x1透明gif我正在使用所以你的代码将运行，我只是传递变量重新定位第一个div背景位置。这是一个很好的开始。您只需要确保使用加载的图像尺寸相应地初始化硬编码的数字。

Answer 2

我认为这就是你要找的......

jquery image cropper