simple_image_uploader üzerine geliştirme yapılmış olan cropit i kullanarak resminizi yeniden boyutlandırma, kırpma, düzenlediğiniz resmi yeni sekmede açma işlemini yapabilirsiniz ancak direkt olarak düzenlenen resmi indirme imkanı bu eklentilerde henüz mevcut değildir, aşağıdaki kod bloğumuz ile düzenlediğiniz resminizin düzenlenmiş halini aynı ekranda yan tarafta görebilirsiniz ve otomatik indirme işlemini tetikleyebilirsiniz. İndirme işleminde HTML5 özelllikleri kullanılmıştır, IE ve Safari tarayıcıları bu HTML5 yeniliklerini henüz kendilerine uygulamamışlardır bundan dolayı otomatik indirme işlemi tetiklenmeyecektir, ancak yanda oluşacak yeni resimi farenin sağ tuşuna tıklayıp gerekli adımlardan sonra resminizi bilgisayarınıza kaydedebilirsiniz. Kod bloğunuz Mozilla Firefox, Google Chrome, Opera, Vivaldi kullanıcılarıda sorunsuz çalışmaktadır, IE ve Safari tarayıcıları ileri sürümlerinde HTML5 tam olarak adapte olurlarsa bu tarayıcılarda da kodumuz sorunsuz çalışacaktır. Aşağıdaki kod bloğundaki kodun çalışması için https://github.com/scottcheng/cropit adresinden gerekli eklenti kodlarının indirebilirsiniz ve sonrasına bu kod bloğumuzu eklenti içerisinde çalıştırabilirsiniz. [code language=”html”] <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Image Editor page</title> <script src="jquery-2.1.3.js"></script> <script src="dist/jquery.cropit.js"></script> <style> .cropit-image-preview { background-color: #f8f8f8; background-size: cover; border: 1px solid #ccc; border-radius: 3px; margin-top: 7px; width: 250px; height: 250px; cursor: move; } .cropit-image-background { opacity: .2; cursor: auto; } .image-size-label { margin-top: 10px; } input { display: block; } .export { margin-top: 10px; } </style> </head> <body> <div> <div class="image-editor" style="width: 50%; float: left;"> <!– The actual file input will be hidden –> <input type="file" class="cropit-image-input" style="display: none" /> <!– And clicking on this button will open up select file dialog –> <button class="select-image-btn">Select New Image</button> <div class="cropit-image-preview" style="width: 770px; height: 347px;"></div> <div class="image-size-label">Resize and drag</div> <input type="range" class="cropit-image-zoom-input"> <button class="export">Download and display image</button> <a id="imageLink" href="#" download="myFilename.png" style="display: none"></a> </div> <div style="width: 50%; float: right;"> <div style="width: 770px; height: 347px; margin-top: 31px;"> <img id="image" src="myExp.jpg" /> </div> <div> <br /> <span>* Chrome, Firefox, Opera, Vivaldi tarayıcıları ile uyumlu çalışmaktadır.</span> <br /> <span>* İndirme işlemi 5 saniye otomatik başlamaz ise resmin üzerine fareyle sağ tıklayarak sonrasında gerekli adımlar ile indirme işlemini gerçekleştiriniz.</span> </div> </div> </div> <script> $(function() { $(‘.image-editor’).cropit({ imageState: { src: ‘myExp.jpg’ } }); $(‘.export’).click(function() { var imageData = $(‘.image-editor’).cropit(‘export’); //show on screen var image = document.getElementById("image"); //.createElement(‘a’); image.src = imageData; //trigger download operation var link = document.getElementById("imageLink"); //.createElement(‘a’); link.download = "wwwyazilimcitynet.png"; link.href = imageData.replace(/^data:image\/png[^;]/, ‘data:image/octet-stream’); link.click(); }); // When user clicks select image button, // open select file dialog programmatically $(‘.select-image-btn’).click(function() { $(‘.cropit-image-input’).click(); }); }); </script> </body> </html> [/code]]]>
Merhaba,
Paylaşımınız için teşekkür ederim, Ben grafik tasarımcısıyım gerekli gördüğüm için php ve mysql öğrenmeye çalışıyoum php de form işlemleriyle ilgili herşeyi yarım yamalakta olsa yapmaya çalışıyorum form bilgilerini sql içine kaydetmeyi resimleri ve bilgileri silmeyi düzenlemeyi ayrıca resmi dosyasından ve sql den silmeyi bile karnım ağrıyarak öğrendim…
ama bu croppit java veya jqry le yapılış mantığım almıyor kullanmak istiyorum ama java mantığını anlamıyorum ben bu sqripti hazırlamış olduğum formdan sql içine yazmayı resmi düzenlemeyi , silmeyi nasıl yapabilirim bunu nasıl entegre edebilirim bana zamanınız olursa yardımcı olursanız çok teşekkür ederim kolay gelsin
Merhaba, cropit’in java ile ilgisi yok, tam bir örnek ve anlatım bulmanız belki zor ama bir örneğe buradan bakabilirsiniz.