Insérer une image et mettre à cercle en toile

Ceci est mon code à insérer l'image sur la toile ..Insérer une image et mettre à cercle en toile

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
<button onclick="addTexttitle()" type="button" class="text-left btn-block btn white">Set Image To Circle</button> 
<input type="file" id="file"> 
     <canvas id="canvas" width="750" height="550"></canvas> 
     <a href='' id='txt' target="_blank">Click Me!</a> 
     <br /> 
     <img id="preview" />

https://jsfiddle.net/javasalden/yn04k565/

comment bouton compléter:

<button onclick="addTexttitle()" type="button" class="text-left btn-block btn white">Set Image To Circle</button>

quand je clique et image/élément sera CIRCLE

Source

2017-07-06 javas

Essayez fonction clipTo

img.set({ 
clipTo: function (ctx) { 
    ctx.arc(0, 0, radius, 0, Math.PI * 2, true); 
} 
});

Voici mise à jour fiddle, le rayon est la moitié de l'image téléchargée

Source

2017-07-06 07:14:18 Durga

Salut, j'ai créé un exemple, s'il vous plaît jeter un coup d'oeil, C'est certainement utile pour vous.

var createCache = function(requestFunction) { 
 
    var cache = {}; 
 
    return function(key, callback) { 
 
     if (!cache[key]) { 
 
      cache[key] = $.Deferred(function(defer) { 
 
       requestFunction(defer, key); 
 
      }).promise(); 
 
     } 
 
     return cache[key].done(drawImg); 
 
    }; 
 
}; 
 

 

 
var loadImage = createCache(function(defer, url) { 
 
    var image = new Image(); 
 
    function cleanUp() { 
 
     image.onload = image.onerror = null; 
 
    } 
 
    
 
    defer.then(cleanUp, cleanUp); 
 
    image.onload = function() { 
 
     defer.resolve(url); 
 
    }; 
 
    image.onerror = defer.reject; 
 
    image.src = url; 
 
}); 
 

 

 
var drawImg = function(img) { 
 
    var tmpCanvas = document.createElement('canvas'), 
 
     tmpCtx = tmpCanvas.getContext('2d'), 
 
     image = new Image(); 
 
    
 
    
 
    image.src = img; 
 
    tmpCanvas.width = image.width*2; 
 
    tmpCanvas.height = image.height*2; 
 
    
 
    // draw the cached images to temporary canvas and return the context 
 
    tmpCtx.save(); 
 
     tmpCtx.beginPath(); 
 
      tmpCtx.arc(2*24, 2*24, 2*24, 0, Math.PI*2, true); 
 
     tmpCtx.closePath(); 
 
     tmpCtx.clip(); 
 

 
    tmpCtx.drawImage(image, 0, 0, 4*24+2, 4*24+2); 
 
    
 
     tmpCtx.beginPath(); 
 
      tmpCtx.arc(0, 0, 2, 0, Math.PI*2, true); 
 
      tmpCtx.clip(); 
 
     tmpCtx.closePath(); 
 
    tmpCtx.restore(); 
 

 
    $('body').append(tmpCanvas); 
 
}; 
 

 

 
var cacheImgs = function() { 
 
    var imgs = [ 
 
     
 
     'https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg' 
 
    ]; 
 
    
 
    for (var i = 0; i < imgs.length; i++) { 
 
     var img = loadImage(imgs[i])/*.done(drawImg(imgs[i]))*/; 
 
     // .done callback is what sends the canvases to where they need to go 
 
    } 
 
} 
 
cacheImgs();

canvas { float: left; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
<body></body>

Source

2017-07-06 04:20:28

Je pense que l'OP cherchait une solution fabric.js au problème. – Blindman67

peut-être qu'il n'a pas mensionné alors j'ai pensé que cela pourrait être utile. et ça marchait bien. –

Merci bro @ Blindman67 pour la mise à jour du code et la suppression des consoles inutiles. –

Insérer une image et mettre à cercle en toile

Répondre

Questions connexes