我有一个画布,上面有2张图像,一个没有发生,其他可以更改。现在,我正在尝试使用文件输入来更改/替换图像,一切都很好,只是在更改图像时它会替换我想要的图像,但还会在顶部添加一个图像。我想用id='changeimg'
//Add Image to Canvas
var imgObj = new Image();
//imgObj.id='changeimg';
imgObj.src = "blank.png";
var imgmain = imgObj.onload = function() {
var image = new fabric.Image(imgObj);
image.set({
id: 'changeimg',
angle: 0,
height: 350,
width: canvas.getWidth(),
align: 'mid', //added
originX: 'center', //added
originY: 'center', //added
});
canvas.centerObject(image);
canvas.add(image);
}
var imgObj1 = new Image();
//imgObj1.id='backgroundimg';
imgObj1.src = "template1.png";
var imgmain = imgObj1.onload = function() {
var image1 = new fabric.Image(imgObj1);
image1.set({
id: 'backgroundimg',
angle: 0,
height: canvas.getHeight(),
width: canvas.getWidth(),
evented: false,
});
//canvas.centerObject(image1);
canvas.add(image1);
}
//On Image Browse and Set on Canvas
document.getElementById('uploadedImg').onchange = function handleImage(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(file) {
addImage(file.target.result);
}
reader.readAsDataURL(file);
}
function addImage(imgLink) {
fabric.Image.fromURL(imgLink, function(img) {
img.set({
'left': 50
});
img.set({
'top': 150
});
img.scaleToWidth(250);
img.scaleToHeight(250);
var cnt = 0;
var objs = canvas.getObjects();
//var objs = canvas.getActiveObject();
if (objs.length > 0) {
objs.forEach(function(e) {
if (e && e.type === 'image' && e.id === "changeimg") {
e._element.src = imgLink;;
canvas.renderAll();
cnt = 1;
}
});
}
});
}
答案 0 :(得分:0)
使用imageEl.setSrc更改图像元素的来源。
演示
var canvas = new fabric.Canvas('c');
fabric.Image.fromURL("https://picsum.photos/200/300/?random", function(img) {
img.set({
id: 'changeimg',
align: 'mid', //added
originX: 'center', //added
originY: 'center', //added,
scaleX: 200 / img.width,
scaleY: 200 / img.height,
});
canvas.centerObject(img);
canvas.add(img);
image = img;
})
fabric.Image.fromURL("https://picsum.photos/200/250/?random", function(img) {
img.set({
id: 'backgroundimg',
angle: 0,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height,
});
//canvas.centerObject(image1);
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
})
//On Image Browse and Set on Canvas
document.getElementById('uploadedImg').onchange = function handleImage(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(file) {
addImage(file.target.result);
}
reader.readAsDataURL(file);
}
function addImage(imgLink) {
fabric.Image.fromURL(imgLink, function(img) {
var objects = canvas.getObjects();
for (var i = 0, l = objects.length; i < l; i++) {
if (objects[i].id == 'changeimg') {
imageEl = objects[i];
break
}
}
if (imageEl) {
imageEl.setSrc(img.getSrc(), function() {
canvas.renderAll()
imageEl.setCoords();
},{
left: 50,
top: 150,
scaleX: 150 / img.width,
scaleY: 200 / img.height,
})
}
});
}
canvas{
border:2px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.js"></script>
<canvas id="c" width=500 height=500></canvas><br>
<input type='file' id='uploadedImg'>