Crop imagem

PF2G · July 25, 2013 at 02:44 PM

Boa tarde,

eu estou a fazer uma página onde faço o upload de uma imagem e depois faço o crop de uma parte dessa imagem. Mas o meu objectivo é fazer drag à imagem. A imagem abaixo é um exemplo do que eu quero:

http://img198.imageshack.us/img198/3250/zieg.png

O que está a preto será o background do body, o border a vermelho a caixa onde poderei fazer drag da imagem (e mais tarde a parte escolhida para fazer o crop).

De momento não consigo arrastar por causa dos z-index. Será que me poderiam ajudar?

Aqui está o código que tenho até agora:

<style>
 body{margin:0; padding:0; background-color:#000;}
 .demo{margin:auto; width:600px; z-index:-10;}
 .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
 #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; z-index:10;}
 #draggable4{border:none; background:none; z-index:-1;}
 #square{border:2px solid #FFF; z-index:-10;}
 </style>
 <script>
 $(function() {
  $( "#draggable" ).draggable({ axis: "y" });
  $( "#draggable2" ).draggable({ axis: "x" });
  $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
  $( "#draggable4" ).draggable({ containment: "#demo-frame" });
  $( "#draggable5" ).draggable({ containment: "parent" });
 });
 </script>
</head>
<body>
 <div id="square">
  <div class="demo">
   <div id="containment-wrapper">
 <div id="draggable4" class="draggable ui-widget-content">
  <img src="../images/img.jpg" width="800" />
 </div>
   </div>
  </div><!-- End demo -->
 </div>

taviroquai · August 5, 2013 at 12:40 AM

Não preferes usar um plugin jquery para fazeres o crop? Ou tens mesmo que fazer isso de raiz?

Sign In

Crop imagem

Recommended Posts

PF2G

taviroquai

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information