Comment remplacer une image sur une toile onclick?

Question

J'utilise fabricjs pour placer une image sur une toile. Je voudrais apprendre ce que je dois faire pour remplacer l'image déjà dessinée avec une autre d'un clic sur l'URL. Ma compréhension limitée m'a fait penser que je devrais peut-être définir un var pour chaque image, mais je ne suis pas sûr de savoir comment le connecter avec le canvas fabric. J'ai passé les dernières heures à essayer différentes choses sans aucune chance.

J'ai essayé de soumettre une question similaire mais je l'ai supprimée parce que je pensais que c'était peut-être trop compliqué. Toute aide serait grandement appréciée. Voici mon code maintenant:

var canvas = new fabric.Canvas('c'); 
 

 
fabric.Image.fromURL('http://lorempixel.com/400/400/', function(img) { 
 
    var oImg = img.set({ 
 
    selectable: false 
 
    }) 
 
    canvas.add(oImg).renderAll(); 
 
});

canvas { 
 
    border: 1px solid #dddddd; 
 
    border-radius: 3px; 
 
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<canvas id="c" width="400" height="400"></canvas>

Answer 1

Voici comment vous pouvez y parvenir:

var canvas = new fabric.Canvas('c'); 
 
var image, isImageLoaded; 
 

 
fabric.Image.fromURL('//lorempixel.com/200/200/', function(img) { 
 
    isImageLoaded = true; 
 
    image = img.set({ 
 
     selectable: false 
 
    }) 
 
    canvas.add(image).renderAll(); 
 
}); 
 

 
function replaceImage(imgUrl) { 
 
    if (!isImageLoaded) return; //return if initial image not loaded 
 
    var imgElem = image._element; //reference to actual image element 
 
    imgElem.src = imgUrl; //set image source 
 
    imgElem.onload =() => canvas.renderAll(); //render on image load 
 
} 
 

 
canvas.on('mouse:down', function() { 
 
    replaceImage('//lorempixel.com/200/200/'); 
 
});

canvas { 
 
    border: 1px solid #dddddd; 
 
    border-radius: 3px; 
 
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<canvas id="c" width="200" height="200"></canvas>

^{PS: excuses pour ne pas donner cette explication beaucoup.}

Answer 2

Vous pouvez faire beaucoup plus simple. Ne voyez pas pourquoi vous utiliseriez une lib lib pour quelque chose comme ça. J'ai écrit quelque chose de petit en JS qui, je l'espère, vous aidera plus loin.

document.getElementById("image").onclick = function(){ 
 
    document.getElementById("image").src = "http://lorempixel.com/400/400/"; 
 
};

<img id="image" src="http://lorempixel.com/400/400/">

Answer 3

var canvas = new fabric.Canvas('c'); 
 
var oImg; 
 
loadImage(); 
 
function loadImage(){ 
 
    fabric.Image.fromURL('https://lorempixel.com/400/400/', function(img) { 
 
    oImg && canvas.remove(oImg); //If image element alread added to canvas remove it. 
 
    oImg = img.set({ 
 
     selectable: false 
 
    }) 
 
    canvas.add(oImg); //add new image to canvas 
 
    oImg.on('mousedown',onImgMouseDown); //add mouse down lisner to image 
 
    }); 
 
} 
 

 
function onImgMouseDown(){ 
 
loadImage(); 
 
}

canvas { 
 
    border: 1px solid #dddddd; 
 
    border-radius: 3px; 
 
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<canvas id="c" width="400" height="400"></canvas>

Alternative vous ajouter auditeur mousedown à l'image, et vérifier si l'élément ajouté, puis retirez-le de la toile. puis ajouter un nouveau à la toile.