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

Question

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

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

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

真的希望有人能帮忙

此链接here 试图做与我类似的事情，但我不明白它是如何工作的，或者我如何对我的项目做同样的事情？

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);
            }

Answer 1

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

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