我正在使用HTML5并fabric.js用于上传多个图像。我想在此图像画布上添加自定义文本。现在，我正在将一张图片一张一张地上传到画布上。上传图像后，我想在画布上添加自定义文本。
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change",function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
};canvas{
border: 1px solid black;
}
Click Me!!
![]()
https://jsfiddle.net/varunPes/vb1weL93/
我看过一些链接：
http://fancyproductdesigner.com/product/t-shirt/-预期结果。
http://jsfiddle.net/EffEPi/qpJTz/
更新资料
我需要用户可以选择文本的color和font-family。
单击Click Me!!按钮后，custom text和图像应合并为一个图像。
您可以这样使用IText：
canvas.add(new fabric.IText('Tap and Type', {
fontFamily: 'arial black',
left: 100,
top: 100,
}));
和完整的代码：
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
canvas.add(oImg).renderAll();
canvas.setActiveObject(oImg);
});
};
reader.readAsDataURL(file);
});
$('#fill').change(function(){
var obj = canvas.getActiveObject();
if(obj){
// old api
// obj.setFill($(this).val());
obj.set("fill", this.value);
}
canvas.renderAll();
});
$('#font').change(function(){
var obj = canvas.getActiveObject();
if(obj){
// old api
// obj.setFontFamily($(this).val());
obj.set("fontFamily", this.value);
}
canvas.renderAll();
});
function addText() {
var oText = new fabric.IText('Tap and Type', {
left: 100,
top: 100 ,
});
canvas.add(oText);
oText.bringToFront();
canvas.setActiveObject(oText);
$('#fill, #font').trigger('change');
}
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
};canvas{
border: 1px solid black;
}
Click Me!!
![]()
京公网安备 11010802040832号 | 京ICP备19059560号-6 