使用fabric.js和HTML5在圖像畫布上編寫自定義文本

Question

我正在使用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; } 

 <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <input type="file" id="file"> <canvas id="canvas" width="750" height="550"></canvas> <a href='' id='txt' target="_blank">Click Me!!</a><br /> <img id="preview" /> 

https://jsfiddle.net/varunPes/vb1weL93/

我看過一些鏈接：

• http://fancyproductdesigner.com/product/t-shirt/-預期結果。
• http://jsfiddle.net/EffEPi/qpJTz/

更新

我需要用戶可以選擇文本的color和font-family 。

在點擊Click Me!! 按鈕， custom text和圖片應合並在一張圖片中。

Answer 1

您可以像這樣使用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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script> <input type="file" id="file"> <input type="color" value="blue" id="fill" /> <select id="font"> <option>arial</option> <option>tahoma</option> <option>times new roman</option> </select> <button onclick="addText()">Add Custom Text</button> <br /> <canvas id="canvas" width="750" height="550"></canvas> <a href='' id='txt' target="_blank">Click Me!!</a> <br /> <img id="preview" /> 

更新：要使文本始終位於最前面，您需要使用.bringToFront()函數。
（感謝Fabric.js中的@Amit Sharma-繪制多個圖像zindex的問題 ）

http://jsbin.com/qicesa/edit?html,css,js,output