javascript - 从画布转换后如何将图像作为表单的一部分提交?
问题描述
假设我使用将画布转换为图像.todataURL()
,然后我想将此图像作为表单的一部分提交。
我怎样才能做到这一点?
var url = document.querySelector('canvas').toDataURL();
如何使用 URL 将此图像作为表单的一部分提交?
解决方案
下面是一个代码片段,显示了提交画布数据的两种不同方式。
- 第一种是使用标准输入元素和
type=hidden
. 我已经在表单标签中添加了这种输入,并且我在处理画布绘图结束的方法中更新了它的值。您的情况可能会有所不同,但请记住在提交表单之前更新隐藏的输入值。 - 第二种方式是通过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。
推荐阅读
- alfresco - 如何通过在 alfresco 上搜索用户站点来分配工作流任务?
- sql - 为每一行创建具有一个特定值的新列,SQL Server,应该很容易
- c# - Xamarin.Android 如何在任何视图上以编程方式设置波纹效果?
- java - 验证 EditText 是否为空 Android Studio
- dart - 我们可以在颤振中使用 fcm 发送图像推送通知吗?
- python - Django,延迟属性错误
- perl - Perl:XML-Twig get_xpath("//table") 无法获取所有元素
我正在使用 XML-Twig perl 模块解析这个文件:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE reference PUBLIC "-//OASIS//DTD DITA Reference//EN" "reference.dtd"> <reference xm
- java - Appium 异常“无法停止进程;它当前未运行”
- material-ui - 如何在material-ui appbar中定位项目
- python - Python将图像插入Tkinter错误