从画布转换后如何将图像作为表单的一部分提交？

Question

假设我使用.todataURL() 将画布转换为图像，然后我想将此图像作为表单的一部分提交。

我该怎么做？

var url = document.querySelector('canvas').toDataURL();

如何使用 URL 将此图片作为表单的一部分提交？

Answer 1

下面的代码 sn-p 显示了提交画布数据的两种不同方式。

1. 第一个是使用带有type=hidden 的标准输入元素。我已经在表单标签中添加了这种输入，并且在处理画布绘图结束的方法中更新了它的值。您的情况可能有所不同，但请记住在提交表单之前更新隐藏的输入值。
2. 第二种方式是通过ajax提交。我使用相同的隐藏输入及其值，但在您的情况下，您可能不希望像这样直接输入并获取画布数据：

document.querySelector('#canvas-data').toDataURL();

然后像这样发送：

$.post("https://httpbin.org/post", {
  canvasData: document.querySelector('#canvas-data').toDataURL()
});

以下是这两种方法的工作示例：

// =============
// == Globals ==
// =============
const canvas = document.querySelector('#drawing-area');
const canvasContext = canvas.getContext('2d');
const clearButton = document.querySelector('#clear-button');
const ajaxButton = document.querySelector('#ajax-button');
const canvasData = document.querySelector('#canvas-data');
const state = {
  mousedown: false
};

// ===================
// == Configuration ==
// ===================
const lineWidth = 5;
const strokeStyle = '#333';

// =====================
// == Event Listeners ==
// =====================
canvas.addEventListener('mousedown', handleWritingStart);
canvas.addEventListener('mousemove', handleWritingInProgress);
canvas.addEventListener('mouseup', handleDrawingEnd);
canvas.addEventListener('mouseout', handleDrawingEnd);

canvas.addEventListener('touchstart', handleWritingStart);
canvas.addEventListener('touchmove', handleWritingInProgress);
canvas.addEventListener('touchend', handleDrawingEnd);

clearButton.addEventListener('click', handleClearButtonClick);

ajaxButton.addEventListener('click', handleAjaxButtonClick);

// ====================
// == Event Handlers ==
// ====================
function handleWritingStart(event) {
  event.preventDefault();
  const mousePos = getMousePositionOnCanvas(event);
  canvasContext.beginPath();
  canvasContext.moveTo(mousePos.x, mousePos.y);
  canvasContext.lineWidth = lineWidth;
  canvasContext.strokeStyle = strokeStyle;
  canvasContext.fill();
  state.mousedown = true;
}

function handleWritingInProgress(event) {
  event.preventDefault();
  if (state.mousedown) {
    const mousePos = getMousePositionOnCanvas(event);
    canvasContext.lineTo(mousePos.x, mousePos.y);
    canvasContext.stroke();
  }
}

function handleDrawingEnd(event) {
  event.preventDefault();
  state.mousedown = false;
  canvasData.value = canvas.toDataURL()
}

function handleClearButtonClick(event) {
  event.preventDefault();
  clearCanvas();
}

function handleAjaxButtonClick(event) {
  const posting = $.post("https://httpbin.org/post", {
    canvasData: canvasData.value
  });
  posting.done(function(data) {
    console.log(data);
  });
}

// ======================
// == Helper Functions ==
// ======================
function getMousePositionOnCanvas(event) {
  const clientX = event.clientX || event.touches[0].clientX;
  const clientY = event.clientY || event.touches[0].clientY;
  const {
    offsetLeft,
    offsetTop
  } = event.target;
  const canvasX = clientX - offsetLeft;
  const canvasY = clientY - offsetTop;
  return {
    x: canvasX,
    y: canvasY
  };
}

function clearCanvas() {
  canvasContext.clearRect(0, 0, canvas.width, canvas.height);
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 95vh;
}

.drawing-area {
  box-shadow: 0 0 6px 0 #999;
}

button {
  margin: 2em;
  font-size: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class="container">
  <form action="https://httpbin.org/post" method="post">
    <canvas id="drawing-area" class="drawing-area" height="500" width="500"></canvas>
    <div class="buttons-container">
      <button id="clear-button" type="button">Clear</button>
      <button type="submit">Submit</button>
      <button id="ajax-button" type="button">Submit with ajax</button>
    </div>
    <input id="canvas-data" type="hidden" name="canvas-data" />
  </form>
</div>

旁注：我使用 jQuery 发送异步请求，但您也可以Fetch API。