有誰知道一個庫來裁剪圖像來實現圓角輸出?我發現了這個https://foliotek.github.io/Croppie/,但它只是將圖像裁剪爲cicrle。 我想將圖片裁剪這個形狀:http://harboarts.com/shirtdesigner/jpg_design_exports/square_rounded_corners%20_vector-graphic_1331986667453.jpg圓角裁剪圖像使用jquery
-3
A
回答
1
This example is near about what you are trying to achieve.
$(document).ready(function(){
var c = $('.img-container img').cropper({
aspectRatio:1/1,
strict:true,
background:false,
guides:false,
autoCropArea:0.6,
rotatable:false,
//using these just to stop box collapsing on itself
minCropBoxWidth:50,
minCropBoxHeight:50,
crop: function(data){
//console.log("data = %o", data);
//console.log("this = %o", $(this));
//test the new height/width
if(data.height < 100 || data.width < 100){
//try to make it stop
//$(this).cropper('disable');
}else{
var json = [
'{"x":' + data.x,
'"y":' + data.y,
'"height":' + data.height,
'"width":' + data.width + '}'
].join();
$('#image-data').val(json);
}
}
}); // cropper
//console.log("C = %o", c);
$('.img-container img').on('dragmove.cropper', function (e) {
console.log('dragmove.cropper');
var $cropper = $(e.target);
// Call getData() or getImageData() or getCanvasData() or
// whatever fits your needs
var data = $cropper.cropper('getCropBoxData');
console.log("data = %o", data);
// Analyze the result
if (data.height <= 150 || data.width <= 150) {
console.log("Minimum size reached!");
// Stop resize
return false;
}
// Continue resize
return true;
}).on('dragstart.cropper', function (e) {
console.log('dragstart.cropper');
var $cropper = $(e.target);
// Get the same data as above
var data = $cropper.cropper('getCropBoxData');
// Modify the dimensions to quit from disabled mode
if (data.height <= 150 || data.width <= 150) {
data.width = 151;
data.height = 151;
$(e.target).cropper('setCropBoxData', data);
}
});
}); // ready
風格:
.img-container img {
width: 800px;
height: auto;
}
HTML:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/0.9.1/cropper.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/0.9.1/cropper.min.css">
<div class="col-md-9">
<div class="img-container"><img alt="Picture" src="http://fengyuanchen.github.io/cropper/img/picture.jpg"></div>
</div>
0
內幕代碼複雜的,你可以做到這一點
$(document).ready(function(){
$("#btn1").click(function(){
$("img").addClass("important");
});
});
<style>
.important { border-radius:100px;
}
<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="100"><br><br>
插入之前
注意 1)你必須保持圖像爲正方形,然後奧菱就可以得到圓否則U將得到日食一種數字。
1
可以實現邊界半徑這樣
$(document).ready(function(e) {
$('button').click(function(e) {
$('img').css({
"border-radius": "10px",
"-moz-border-radius": "10px",
"-webkit-border-radius": "10px"
});
});
});
或 你可以使用這個庫邊境半徑 pie border radius
相關問題
- 1. 在NSScrollView上裁剪圓角
- 2. 圖像裁剪使用jquery真棒裁剪,不工作
- 3. 如何裁剪圓形圖像openvc android
- 4. 如何將圖像裁剪成圓形?
- 5. OpenCV裁剪圖像與橢圓
- 6. CSS圓形裁剪矩形圖像
- 7. imagemagick中的圖像圓形裁剪
- 8. 使用Java裁剪圖像
- 9. 使用ImageScience裁剪圖像
- 10. 使用php裁剪圖像
- 11. 裁剪圖像
- 12. 裁剪圖像
- 13. 如何用jquery裁剪圖像?
- 14. 無法剪裁/裁剪圖像
- 15. WPF圖像裁剪
- 16. html5圖像裁剪
- 17. WPF圖像裁剪
- 18. 笨裁剪圖像
- 19. 裁剪android圖像
- 20. GWT圖像裁剪
- 21. Silverlight圖像裁剪
- 22. 裁剪YUV圖像
- 23. raphael.js裁剪圖像
- 24. 用OpenCV裁剪圖像
- 25. 讓用戶裁剪圖像
- 26. Bootstrap 4 - 將圖像裁剪成圓形 - 風景照片未被正確裁剪
- 27. 使用jquery在圖像上使用多個裁剪框
- 28. 使用PIL裁剪圖像的邊框
- 29. 如何使用wxPython裁剪圖像?
- 30. 使用CSS裁剪背景圖像
嗨!請避免發佈「僅鏈接」流。如果你的鏈接死了,這個答案不會幫助未來的用戶。相反,將代碼添加到您的答案。如果你這樣做,有一個「視覺工作」的例子是好的! – Timothy