キャンバス上の画像を置き換える方法を教えてください。

Question

私はfabricjsを使用してキャンバスに画像を配置しています。私はすでに描かれたイメージをURL onclickから別のイメージに置き換えるために何をする必要があるのか​​を学びたいと思います。

私の制限された理解は私が多分各イメージのためのvarを設定する必要があると考えているが、私はfabricjsキャンバスとそれをどのように接続するか分からない。私はここ数時間、運が無ければ別のものを試してみました。

私は似たような質問を提出しましたが、削除してみましたが、質問が複雑すぎると思っていました。どんな助けでも大歓迎です。ここに私のコードは今だ：

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

これは、あなたがそれを達成できる方法である：

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：その多くの説明を与えていないため謝罪。あなたがイメージにマウスダウンリスナーを追加し、要素を追加しているかどうかを確認し、キャンバスから削除}

Answer 2

あなたがはるかに簡単にこれを行うことができます。このようなことに特別なlibを使う理由は分かりません。私は平凡なJSで小さなものを書いてくれました。

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>

代替。キャンバスに新しいものを追加します。