javascript:上传图像文件并将其绘制到 Canvas 中

Question

我在一个用于绘制图像的网络应用程序中工作。我使用 CANVAS 元素和 javascript 在上面绘制，但我有一个问题:如何从用户的 pc 加载图像并将其绘制在 Canvas 上？我不想保存在服务器上，只保存在网页上!

以下是代码的简化版本(完整代码会太长):

HTML:

Open file: <input type="file" id="fileUpload" accept="image/*" /><br />
<canvas id="canvas" onmousemove="keepLine()" onmouseup="drawLine()" onmousedown="startLine()" width="900" height="600" style="background-color:#ffffff;cursor:default;">
  Please open this website on a browser with javascript and html5 support.
</canvas>

JavaScript:

var x = 0;
var y = 0;
var clicked = false;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.strokeStyle = "black";
context.lineCap = "round";

canvas.addEventListener('mousemove', function(e) { getMousePos(canvas, e); }, false);

takePicture.onchange = function (event) {
  var files = event.target.files,
    file;
  if (files && files.length > 0) {
    file = files[0];
    processImage(file);
  }
};

function processImage(file) {
  var reader = new FileReader();
  reader.readAsDataUrl(file)
  reader.onload = function(e) {
    var img = new Image();
    img.onload = function() {
      context.drawImage(img, 100,100)
    }
    img.src = e.target.result;
  }
}

   // functions for drawing (works perfectly well)
function getMousePos(canvas, e) {
  var rect = canvas.getBoundingClientRect();
  x = evt.clientX - rect.left;
  y = evt.clientY - rect.top;
}

function startLine() {
  context.moveTo(x,y);
  context.beginPath();
  clicked = true;
}

function keepLine() {
  if(clicked) {
    context.lineTo(x,y);
    context.stroke();
    context.moveTo(x,y);
  }
}

function drawLine() {
  context.lineTo(x,y);
  context.stroke();
  clicked = false;
}

没有版权

Answer 1

const EL = (sel) => document.querySelector(sel);
const ctx = EL("#canvas").getContext("2d");

function readImage() {
  if (!this.files || !this.files[0]) return;
  
  const FR = new FileReader();
  FR.addEventListener("load", (evt) => {
    const img = new Image();
    img.addEventListener("load", () => {
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      ctx.drawImage(img, 0, 0);
    });
    img.src = evt.target.result;
  });
  FR.readAsDataURL(this.files[0]);
}

EL("#fileUpload").addEventListener("change", readImage);

canvas {display: block;}

<input type='file' id="fileUpload" />
<canvas id="canvas" width="300" height="200"></canvas>