Как отправить изображение как часть формы после конвертации из холста

Question

Предположим, я конвертирую холст в изображение, используя .todataURL а затем я хочу отправить это изображение как часть моей формы.

Как я могу это сделать?

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

Как можно использовать URL для отправки этого изображения как части моей формы?

Answer 1

Вы можете добавить скрытое поле в форму, используя JavaScript, а затем отправить

var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();

var input = document.createElement("input");

input.setAttribute("type", "hidden");

input.setAttribute("name", "name_you_want");

input.setAttribute("value", dataURL); 

//append to form element that you want .
document.getElementById("Form").appendChild(input);
console.log(dataURL);

<canvas id="canvas" width="5" height="5"></canvas>

Answer 2

Ниже приведен фрагмент кода, показывающий два разных способа отправки данных холста.

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.