画布背景图像在其上绘制时清除答案

【问题标题】：Canvas background image clears when drawing over it画布背景图像在其上绘制时清除
【发布时间】：2018-07-03 14:22:54
【问题描述】：

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

HTML

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

Javascript

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

【问题讨论】：

标签： javascript html canvas fabricjs

【解决方案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(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

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

【讨论】：