Est-ce que quelqu'un connaît une bibliothèque pour recadrer une image afin d'obtenir une sortie de coin arrondie? J'ai trouvé ceci https://foliotek.github.io/Croppie/ mais il recadre seulement l'image à cicrle. Je veux recadrer l'image à cette forme: http://harboarts.com/shirtdesigner/jpg_design_exports/square_rounded_corners%20_vector-graphic_1331986667453.jpgImage de recadrage de coin arrondie à l'aide de Jquery
-3
A
Répondre
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
style:
.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
Insider de compliquer le code que vous pouvez le faire
$(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>
Insérer avant
Remarque 1) Vous devez garder l'image comme carré puis Oly vous pouvez obtenir le cercle d'autre u obtenir le genre de la figure éclipse.
1
vous pouvez obtenir un rayon de frontière comme celui-ci
$(document).ready(function(e) {
$('button').click(function(e) {
$('img').css({
"border-radius": "10px",
"-moz-border-radius": "10px",
"-webkit-border-radius": "10px"
});
});
});
ou vous pouvez utiliser cette bibliothèque pour le rayon de la frontière pie border radius
Salut! Veuillez éviter de poster des réponses "link-only". Si votre lien meurt, cette réponse n'aidera pas les futurs utilisateurs. Au lieu de cela, ajoutez le code à votre réponse. Si vous le faites, avoir un lien vers un "travail visuel" -exemple est ok! – Timothy