canvas - 如何使用 Fabric.js 用 Canvas 中的新图像替换现有图像

Question

我需要用从计算机上传的文件中的新图像替换现有图像，我想用新上传的图像替换图像。 Here is the code (JSFiddle) .

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

function addImage () {
    fabric.Image.fromURL('http://lorempixel.com/400/200', function (img) {
     img.set({ 'left': 50 });
      img.set({ 'top': 50 });
      img.scaleToWidth(100);
      img.scaleToHeight(100);
      canvas.add (img);
    });
}

addImage();

canvas {
    border:1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>
<canvas id="c" width="400" height="200"></canvas>
<span><input type="file" name="" id="span"></span>

Answer 1

您可以通过以下方式完成此操作...

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

function addImage(imgLink) {
    fabric.Image.fromURL(imgLink, function(img) {
        img.set({ 'left': 50 });
        img.set({ 'top': 50 });
        img.scaleToWidth(100);
        img.scaleToHeight(100);
				
        var objs = canvas.getObjects();
        if (objs.length) {
            objs.forEach(function(e) {
                if (e && e.type === 'image') {
                    e._element.src = imgLink;
                    canvas.renderAll();
                }
            });
        } else canvas.add(img);
    });
}

addImage('http://lorempixel.com/400/200');

// file upload
var span = document.querySelector('#span');
span.onchange = function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(file) {
        addImage(file.target.result);
    }
    reader.readAsDataURL(file);
}

canvas {
  border:1px solid lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>
<canvas id="c" width="400" height="200"></canvas>
<span><input type="file" name="" id="span"></span>