我正在尝试将画布转换为Jpeg图像并将其放入表单的隐藏字段中,然后提交表单。
function createBlob() {
var imageblob = canvas.toDataURL('image/jpeg', 0.5);
document.getElementById("id_hidden_preview_field").value = imageblob; // Here we put the imageurl blob into the hidden_preview_field.
// Here we submit the form with the
$("#design").submit();
alert("after submit");
}
以下是表单的代码:
<div class="container">
<h2>Add a design</h2>
<form id="design" enctype="multipart/form-data" method="post"><input type="hidden" name="csrfmiddlewaretoken" value="qrGJSSQADxYItnN0TKUUPJA3JExfaFaP">
<input id="id_hidden_preview_field" name="hidden_preview_field" type="hidden"></p>
<!--<input type='submit' value='Save' />-->
<button id="gif" onclick="createBlob()">Save</button>
</form></div>
出于某种原因,当我没有发出警报(alert(“提交后”+新的Date()。getTime());)时,表单会在隐藏字段中没有图像的情况下发送。
当我发出警报时,它会毫无问题地发送。
这让我觉得表单提交存在一个问题,它会破坏它需要发送的一个DOM元素。
现在有没有人,如果它真的是异步的,如果不是这样,我怎样才能确保$(“#design).submit();仅在图像被复制到隐藏字段后被调用,或者可能没有破坏DOM元素。
非常感谢!
答案 0 :(得分:2)
我修改了代码的某些部分,并使用JavaScript的addEventListener
函数将click
事件监听器添加到button
,而不是HTML的onclick
属性。
所以这是代码:
<强> HTML
<canvas id="myCanvas"></canvas>
<div class="container">
<h2>Add a design</h2>
<form id="design" enctype="multipart/form-data" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="qrGJSSQADxYItnN0TKUUPJA3JExfaFaP" />
<input id="id_hidden_preview_field" name="hidden_preview_field" type="hidden" />
<button id="gif">Save</button>
</form>
</div>
如您所见,我添加了canvas
代码(仅用于演示)并删除onclick
按钮的Save
。
<强>的JavaScript
/* Some drawing on canvas */
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
/* Get the needed elements from the DOM */
var form = document.getElementById('design'),
saveButton = document.getElementById('gif'),
hiddenField = document.getElementById('id_hidden_preview_field');
/* Add click listener on save button click */
saveButton.addEventListener('click', createBlob, false);
/* The click handler function */
function createBlob() {
var imageblob = canvas.toDataURL('image/jpeg', 0.5);
hiddenField.value = imageblob; // Here we put the imageurl blob into the hidden_preview_field.
// Here we submit the form with the
form.submit();
}
在这里,我添加了一些代码,用于绘制canvas
,获取并缓存elements
,在保存按钮上添加了事件侦听器。 createBlob
与您的代码几乎相同。
您可以在JSFiddle中查看实时示例。
当您点击Save
按钮时,JSFiddle会出错,因为您无法在那里提交表单。
但是,如果您打开Chrome开发工具并转到网络标签,则可以看到request
包含blob。您也可以使用Firefox开发工具或使用Firebug扩展(选项卡名称为Net )在Firefox中检查相同内容。