Question

基本上我试图创建图像裁剪脚本，它几乎完成了，这是我的脚本：

但我无法弄清楚如何让crop_area在没有深色的情况下拥有清晰的背景，任何人都可以如此善良并帮助我一点点吗？ :)

Answer 1

你需要创建5个div来做到这一点 - 只用一个就不可能 - 除非你使用了canvas元素，你将切出表示所选区域的方块。

    [////////////]
    [//][    ][//]
    [////////////]

类似的东西：）

然后当您更改所选区域的大小/位置时，您需要重新计算div的所有位置以匹配目标区域进行裁剪

Answer 2

除非你为了挑战或乐趣而这样做，否则为什么不考虑使用像Jcrop这样的库：http://deepliquid.com/projects/Jcrop/demos.php

Answer 3

可以在crop_area的背景中添加相同的图片。

我在这里做到了：http://jsfiddle.net/7C8fp/10/

//---------container--------//

//get image width and height
var width = $("#container img").width();
var height = $("#container img").height();

//set css to container
$("#container, #black_bg").css({width: width, height: height});

function bgUpdate()
{    
    area=$( "#crop_area" ); 
    bg=area.position();
    bgLeft=width-bg.left
    bgTop=height-bg.top;
    area.css({'background-position':bgLeft+'px '+bgTop+'px '});
}

//--------crop area-------//
$(document).ready(function(){

$( "#crop_area" ).css({
    left: width / 2 - 60,
    top: height / 2 - 80,
}).resizable({
    aspectRatio: 9 / 10,
    containment: "#container",
    handles: 'n, e, s, w'
}).bind('resize', function(){bgUpdate();});

bgUpdate(); 

$( "#crop_area" ).draggable({containment: 'parent'}).bind('drag', function(){bgUpdate();});                                                          
});

在你的CSS中

#crop_area{width:120px; height:160px;  position:absolute; 
background:url(http://4.bp.blogspot.com/-Ly7zNPYNc4c/TmDqZ9yF4FI/AAAAAAAAAnc/EqOw62ryF5w/s1600/Anime-Wallpapers-5.jpg);
background-size:466px 350px;
}

它可以被优化，并且有一些剪辑，但它有效（lol）

编辑：更改bind（）的live（）使得bgUpdate可以调整大小 http://jsfiddle.net/7C8fp/11/

两个div的不透明度差异

3 个答案: