Javascript 使用fabric.js和HTML5在图像画布上编写自定义文本

我使用HTML5和上传多个图像。我想在此图像画布上添加自定义文本。现在我正在把多张图片一张一张地上传到画布上。上传图像后，我想在画布上添加自定义文本

var canvas=newfabric.canvas（'canvas'）；
document.getElementById（'file'）.addEventListener（“更改”，函数（e）{
var file=e.target.files[0]；
var reader=new FileReader（）；
控制台日志（“读卡器”+读卡器）；
reader.onload=函数（f）{
var数据=f.target.result；
fabric.Image.fromURL（数据、函数（img））{
var oImg=img.set（{左：70，上：100，宽：250，高：200，角：0}）。比例（0.9）；
canvas.add（oImg.renderAll（）；
var a=canvas.setActiveObject（oImg）；
var dataURL=canvas.toDataURL（{格式：'png'，质量：0.8}）；
});
};
reader.readAsDataURL（文件）；
});
document.querySelector（'#txt'）.onclick=function（e）{
e、 预防默认值（）；
canvas.deactivateAll（）.renderAll（）；
document.querySelector（'#preview'）.src=canvas.toDataURL（）；
};
画布{
边框：1px纯黑；
}



您可以这样使用：

canvas.add（new fabric.IText（'Tap and Type'）{
fontFamily：“arial黑色”，
左:100,，
前100名，
}));

完整代码：


var canvas=newfabric.canvas（'canvas'）；
document.getElementById（'file'）.addEventListener（“更改”，函数（e）{
var file=e.target.files[0]；
var reader=new FileReader（）；
控制台日志（“读卡器”+读卡器）；
reader.onload=函数（f）{
var数据=f.target.result；
fabric.Image.fromURL（数据、函数（img））{
var oImg=img.set（{左：70，上：100，宽：250，高：200，角：0}）。比例（0.9）；
canvas.add（oImg.renderAll（）；
canvas.setActiveObject（oImg）；
});
};
reader.readAsDataURL（文件）；
});
$（'#fill'）。更改（函数（）{
var obj=canvas.getActiveObject（）；
如果（obj）{
//旧api
//obj.setFill（$（this.val（））；
对象设置（“填充”，此值）；
}
canvas.renderAll（）；
});
$（'#font'）。更改（函数（）{
var obj=canvas.getActiveObject（）；
如果（obj）{
//旧api
//obj.setFontFamily（$（this.val（））；
对象集（“fontFamily”，此值）；
}
canvas.renderAll（）；
});
函数addText（）{
var oText=new fabric.IText（'Tap and Type'，{
左:100,，
前100名，
});
canvas.add（oText）；
oText.bringToFront（）；
setActiveObject（oText）；
$（'fill，'font'）。触发器（'change'）；
}
document.querySelector（'#txt'）.onclick=function（e）{
e、 预防默认值（）；
canvas.deactivateAll（）.renderAll（）；
document.querySelector（'#preview'）.src=canvas.toDataURL（）；
};
画布{
边框：1px纯黑；
}

arial
塔荷马
新罗马时代
添加自定义文本




我只想自定义一次文本。在您的代码中，有多个自定义标记用于多个图像。我想要文本颜色、字体样式。
一次性自定义文本
你是说用户第一次上传图像吗<代码>我想要文本颜色、字体样式
您的意思是要控制颜色和字体吗？如果是这样的话，请参阅代码片段：
fontFamily:'arial black'，
。另外，请阅读文档（单击
IText
）您还有其他想法吗？因为我只希望用户选择文本颜色和字体样式。您的答案是正确的。但当我上传下一张图片时，自定义文本将隐藏。自定义文本应该位于所有图片的上方