Разница непрозрачности в два деления

Question

В основном я пытаюсь создать скрипт обрезки изображения, и он почти готов, вот мой скрипт:

http://jsfiddle.net/7C8fp/3/

Но я не могу понять, какзаставить crop_area иметь четкий фон без этого темного цвета, может ли кто-нибудь быть таким добрым и помочь мне немного?:)

Answer 1

Если вы не делаете это для испытания или для удовольствия, почему бы не подумать об использовании библиотеки, такой как Jcrop: http://deepliquid.com/projects/Jcrop/demos.php

Answer 2

Это возможно при добавлении одной и той же картинки в фоновом режиме 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;
}

Это может быть оптимизировано, и есть некоторые ограничения, но это работает (смеется)

Редактировать: изменение live () для bind () заставляет работать bgUpdate с resize http://jsfiddle.net/7C8fp/11/

Answer 3

вам нужно создать 5 делений, чтобы сделать это - невозможно только с одним - если вы не использовали элемент canvas, на котором вы бы вырезали квадрат, представляющий выбранную область.

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

что-то вродечто:)

, а затем, когда вы изменяете размер / положение выделенной области, вам необходимо пересчитать все позиции элементов div, чтобы соответствовать целевой области для кадрирования