Javascript-如何在表单中提交画布？

基本上，我的问题是我有一个画布，我想使用画布的形式，就像它是一个在输入中提交的带有文件类型的图像一样，这样我就可以访问$\u FILES数组

我做的项目是一个图像裁剪脚本，用户通过输入类型文件选择一个图像文件，然后脚本将图像绘制到画布上，然后用户可以缩放/裁剪图像。。。这一切都很好

但是如何将裁剪后的图像作为表单文件输入数据发送到php文件，并访问$\u FILES超级全局数组

我真的希望有人能帮忙

这个链接试图做一些类似于我的事情，但我不明白它是如何工作的，或者我怎么能对我的项目做同样的事情

Javascript

            function convertCanvasToImage() {
                var temp_ctx, temp_canvas;
                temp_canvas = document.createElement('canvas');
                temp_ctx = temp_canvas.getContext('2d');
                temp_canvas.width = windowWidth;
                temp_canvas.height = windowWidth;
                temp_ctx.drawImage(ctx.canvas, cutoutWidth, cutoutWidth, windowWidth, windowWidth, 0, 0, windowWidth, windowWidth);


                var dataurl = temp_canvas.toDataURL("image/jpeg");
                croppedImage.src = dataurl;
                contentCall(dataurl);
            }

            function contentCall(profileImage) {
                var http = new XMLHttpRequest();
                var url = "ajax.php";
                var params = "profileImage=" + profileImage;
                http.open("POST", url, true);
                http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                http.onreadystatechange = function () {
                    if (http.readyState === 4 && http.status === 200) {
                        alert(this.responseText);
                    }
                };
                http.send(params);
            }

            document.getElementById("myfiles").addEventListener("change", pullFiles, false);
            document.getElementById("scaleSlider").addEventListener("input", updateScale, false);
            document.getElementById("convert").addEventListener("click", convertCanvasToImage, false);

更新 我自己设法解决了这个问题

                var multiPart = new FormData();
                var fileName = "pernille";
                multiPart.append('retard', 'christian');
                temp_canvas.toBlob(function(blob){
                    multiPart.append('blobTest', blob, fileName);
                    contentCall(multiPart);
                }, "image/jpg");
            }

            function contentCall(profileImage) {
                var http = new XMLHttpRequest();
                var url = "ajax.php";
                http.open("POST", url, true);
                http.onreadystatechange = function () {
                    if (http.readyState === 4 && http.status === 200) {
                        alert(this.responseText);
                    }
                };
                http.send(profileImage);
            }

---

您需要将画布作为图像存储在隐藏表单字段中作为其值，然后在提交表单时，图像将被提交

// Save canvas as dataURL image
var dataURL = canvas.toDataURL('image/png');

---

我已经在这里做了var dataurl=temp_canvas.toDataURLimage/jpeg画布也可以转换为Blob，对吗？在支持的地方。我认为这样可能更有效率。canvas DOM元素有一个.toBlob API。然后你可以使用文件API将其与帖子一起发送。但是我如何在表单中使用它，以便我可以使用$\u文件访问它。。。因为我的文件上传依赖于超级全局$_FILES数组-，-，这是我第一次这样做：是的，.toBlob是我想要的。。。但是我不知道如何使用它，我在这里读到过它。。。但是我如何使用它，以及如何将它与表单一起使用，这让我相当困惑