Im trying to make the page with image cropping "frame". In the comment below is the jFiddle (although submit button isn´t working) .... What Im trying to do is that the part of the image, which is not in the crop frame, should be transparent, so the user could see, what part of the image is cropped. My googling led to nothing so far...:/ Can you help me how to do that transparency?
问问题
1128 次
2 回答
1
这是另一种方法：
您需要 2 个 div 一个在彼此之上，大小相同。div 1 将在“后”（z-index:-1） div 2 将在“前”（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 您只需更改这些值，以便可以用鼠标拖动图像
更新 - 您的代码：
这是一个开始：
因为我不想重新编写您的代码，所以我使用 3 个 div，在彼此之上，第一个以图像作为背景。第二个有透明边框，第三个只是一个空的 1x1 透明 gif，我正在使用它，所以你的代码将运行，我只是传递变量来重新定位第一个 div 的背景位置。这是一个很好的开始。您只需要确保根据加载的图像尺寸相应地初始化硬编码数字。
于 2013-05-27T09:15:08.403 回答
0
我想这就是你要找的...
于 2013-05-27T09:18:41.980 回答