Jump to content
PF2G

Crop imagem

Recommended Posts

PF2G

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:

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>

Share this post


Link to post
Share on other sites
taviroquai

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.