Escriba texto personalizado en el canvas de la imagen con fabric.js y HTML5

Estoy usando HTML5 y fabric.js para subir varias imágenes. Quiero añadir texto personalizado en este canvas de imagen. En este momento estoy cargando varias imágenes en el canvas una por una. Después de subir las imágenes quiero agregar texto personalizado en el canvas.

 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/

He visto algunos enlaces:

  • http://fancyproductdesigner.com/product/t-shirt/ – El resultado esperado.
  • http://jsfiddle.net/EffEPi/qpJTz/

Actualizar

Necesito que el usuario pueda elegir el color del texto y la font-family .

Después de hacer clic en Click Me!! botón, el custom text y la imagen deben unirse en una imagen.

Puedes usar IText así:

 canvas.add(new fabric.IText('Tap and Type', { fontFamily: 'arial black', left: 100, top: 100, })); 

Y el código completo:

 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!!