画布背景图像在绘制时清除

Question

我尝试编写的应用程序让用户将图像上传到画布，然后在其上绘制线条。 到目前为止，我已经向下上传到画布以及绘制线条，除了每当我在画布上绘制线条时，上传的图像都会消失。 在下面，您将看到我目前为该应用程序提供的html和javascript代码。 各种元素是从各种教程中获得的，因此我假设它们之间相互覆盖是不兼容的。

的HTML

<input type='file' id="fileUpload">
<canvas id="c" width = 750 height= 400 style="border:1px solid #ccc"></canvas>

Java脚本

// begin file upload block
function el(id) { return document.getElementById(id); } 

   var canvas = el("c");
   var context = canvas.getContext("2d");

   function readImage() {
       if (this.files && this.files[0]) {
           var FR = new FileReader();
           FR.onload = function (e) {
               var img = new Image();
               img.onload = function () {
                   context.drawImage(img, 0, 0,img.width,img.height,0,0,750,400);
               };
               img.src = e.target.result;
           };
           FR.readAsDataURL(this.files[0]);
       }
   }

   el("fileUpload").addEventListener("change", readImage, false);

//end file upload block

//begin line drawing block
var canvas = new fabric.Canvas('c', { selection: false });
var line, isDown;

canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
  line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
    originX: 'center',
    originY: 'center'
  });
  canvas.add(line);
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  line.set({ x2: pointer.x, y2: pointer.y });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});

//end line drawing block

Answer 1

使用fabric.Image.fromURL加载图像，然后使用canvas.add()将其添加到画布。

演示

 //begin line drawing block var canvas = new fabric.Canvas('c', { selection: false }); var line, isDown; canvas.on('mouse:down', function(o) { isDown = true; var pointer = canvas.getPointer(oe); var points = [pointer.x, pointer.y, pointer.x, pointer.y]; line = new fabric.Line(points, { strokeWidth: 5, fill: 'red', stroke: 'red', originX: 'center', originY: 'center' }); canvas.add(line); }); canvas.on('mouse:move', function(o) { if (!isDown) return; var pointer = canvas.getPointer(oe); line.set({ x2: pointer.x, y2: pointer.y }); canvas.renderAll(); }); canvas.on('mouse:up', function(o) { isDown = false; }); //end line drawing block // begin file upload block function el(id) { return document.getElementById(id); } function readImage() { if (this.files && this.files[0]) { var FR = new FileReader(); FR.onload = function(e) { fabric.Image.fromURL(e.target.result, function(img) { img.set({ left: 0, top: 0, evented: false }); img.scaleToWidth(canvas.width); img.setCoords(); canvas.add(img); }) }; FR.readAsDataURL(this.files[0]); } } el("fileUpload").addEventListener("change", readImage, false); //end file upload block 

 <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <input type='file' id="fileUpload"> <canvas id="c" width = 750 height= 400 style="border:1px solid #ccc"></canvas>