Javascript-如何以表格形式提交畫布？

Question

基本上我的問題是我有一個畫布，我想以某種形式使用畫布，就像它是在輸入中提交的帶有某種文件類型的圖像一樣，因此我可以訪問$ _FILES數組。

我所做的項目是一個圖像裁剪腳本，其中用戶通過輸入類型文件選擇了一個圖像文件，然后該腳本將圖像繪制到畫布上，然后用戶可以縮放/裁剪圖像...這一切都很好..

但是如何將裁剪后的圖像作為表單文件輸入數據發送到php文件並訪問$ _FILES超級全局數組？

我真的希望有人能幫忙

此鏈接在這里試圖做類似的東西給我，但我不明白它是如何工作的，或我怎么能做到這一點與我的項目？

Java腳本

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