如何将用户生成的png副本发送到后端

Question

我正在构建一个网站，允许用户创建自定义图形，然后直接从页面下载。

我是通过用户通过javascript驱动的表单自定义svg来完成这项工作的，然后在下载之前将其制作成PNG。

然而，现在我想存储用户创建的png的副本，这样我就可以在网站的主页上显示它。存储动态创建的图形副本的最佳方式是什么？异步传输HTTP请求？这两个话题对我来说都是非常陌生的，所以我不确定如何从这里开始。

这里的代码用于参考，它从svg构建PNG，然后为用户触发下载。

var svg = document.getElementById("bg2");
var canvas = document.querySelector("canvas");
function triggerDownload (imgURI) {
var evt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true
});
if(document.getElementById("name").value=="null" || document.getElementById("name").value=="") {
var un = "MakeAGraphic";
} else {
var enteredName = document.getElementById("name").value.replace(/[^a-zA-Z ]/g, "");
var un = `${enteredName}_MakeAGraphic`
}
var a = document.createElement('a');
a.setAttribute('download', `${un}.png`);
a.setAttribute('href', imgURI);
a.setAttribute('target', '_blank');
a.dispatchEvent(evt);
}
btn.addEventListener('click', function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
triggerDownload(imgURI);
};
img.src = url;
});

Answer 1

同意@showdev提到的答案。

呼叫canvas.toBlob(回调，mimeType，qualityArgument(

然后打电话formData.append("图像"，blob(

然后使用AJAX或获取API上传formData。

请参阅上的文档

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch