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

我使用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/

更新

我需要用户可以选择文本的颜色和字体系列.

点击Click Me !!按钮,自定义文本和图像应该在一个图像中聚集在一起.

解决方法:

您可以像这样使用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()函数. (感谢@Amit Sharma在Fabric.js – problem with drawing multiple images zindex年)

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

标签：javascript,css,html5,canvas,fabricjs
来源： https://codeday.me/bug/20191005/1856606.html