代码之家 › 专栏 › 技术社区 › toing_toing

用javascript实现HTML画布中手写数字矩阵的获取

html5-canvas javascript

toing_toing · 技术社区 · 7 年前

我想在画布上画一个物体的矩阵。我有一个500*500的画布,需要转换成28*28才能与MNIST数据集兼容。

[0,0,0,0,0,0,0,0,0,0,0,0,0.....]

这是我的密码:

var c = document.getElementById('c');
var ctx = c.getContext('2d')
var paint = false
var hidden = false
window.onmousedown = toggle
window.onmousemove = draw
window.onmouseup = drawoff

function toggle() {
  if (paint) {
    paint = false;
  } else {
    paint = true;
  }
}

function draw(e) {
  var rect = c.getBoundingClientRect();
  if (paint && !hidden) ctx.fillRect(e.x - rect.left, e.y - rect.top, 50, 50)
}

function drawoff() {
  paint = false;
}

function clear() {
  ctx.clearRect(0, 0, 500, 500);
}

window.save = function() {
  var digit = new Image();
  digit.src = c.toDataURL();
  c.width = 28
  c.height = 28
  ctx.drawImage(digit, 4, 4, 20, 20);
  document.getElementById('img').src = c.toDataURL();
  // document.getElementById('c').style.display = 'none';
  hidden = true

  var imgData = ctx.getImageData(0, 0, 28, 28);
  var imgBlack = []
  for (var i = 0; i < imgData.data.length; i += 4) {
    if (imgData.data[i + 3] === 255) imgBlack.push(1)
    else imgBlack.push(0)
  }

  var dataStr = JSON.stringify(imgData)
  console.log(dataStr)
}

canvas { border: solid 1px black }

<div class="row canvas-button-css">
  <button class="btn btn-success" id="save" onclick="save()">Generate Image</button>
  <button class="btn btn-warning" id="clear" onclick="clear()">Clear Canvas</button>
</div>
<div class="row canvas-row-css">
  <img id="img" style="">
  <canvas id='c' class="canvas-css" width='500' height='500'></canvas>
</div>

(或在这里) Jsfiddle )

imgData 矩阵也是零,所以转换为 imgBlack . 任何帮助,将不胜感激如何正确地获得图像数据到计算机上 伊姆格达塔 矩阵。

1 回复 | 直到 7 年前

enxaneta 7 年前

您可以使用画布作为图像。我使用的是缓冲区画布(与DOM无关) c1 从 c 画布:

  let c1 = document.createElement("canvas");
  let ctx1 = c1.getContext('2d')
  c1.width = 28
  c1.height = 28
  ctx1.drawImage(c, 4, 4, 20, 20);// c is the first canvas

这个 c1类

var c = document.getElementById('c');
var ctx = c.getContext('2d')
var paint = false
var hidden = false
window.onmousedown = toggle
window.onmousemove = draw
window.onmouseup = drawoff

function toggle() {
  if (paint) {
    paint = false;
  } else {
    paint = true;
  }
}

function draw(e) {
  var rect = c.getBoundingClientRect();
  if (paint && !hidden) ctx.fillRect(e.x - rect.left, e.y - rect.top, 50, 50)
}

function drawoff() {
  paint = false;
}

function clear() {
  ctx.clearRect(0, 0, 500, 500);
}

window.save = function() {

  
  let c1 = document.createElement("canvas");
  let ctx1 = c1.getContext('2d')
  c1.width = 28
  c1.height = 28
  ctx1.drawImage(c, 4, 4, 20, 20);
  document.getElementById('img').src = c1.toDataURL();
  // document.getElementById('c').style.display = 'none';
  hidden = true

  var imgData = ctx1.getImageData(0, 0, 28, 28);
  var imgBlack = []
  for (var i = 0; i < imgData.data.length; i += 4) {
    if (imgData.data[i + 3] === 255) imgBlack.push(1)
    else imgBlack.push(0)
  }

  var dataStr = JSON.stringify(imgData)
  console.log(dataStr)
}

canvas { border: solid 1px black }

<div class="row canvas-button-css">
  <button class="btn btn-success" id="save" onclick="save()">Generate Image</button>
  <button class="btn btn-warning" id="clear" onclick="clear()">Clear Canvas</button>
</div>
<div class="row canvas-row-css">
  <img id="img" style="">
  <hr>
  <canvas id='c' class="canvas-css" width='500' height='500'></canvas>
</div>