Javascript - How do i submit a canvas in a form?

Question

Basically my problem is that i have a canvas and i want to use the canvas in a form like if it were an image submitted in a input with a type of file, so i can access the $_FILES array..

The project i have made is an image cropping script where a user chose an image file through input type file, and then the script draw the image onto a canvas, then the user can zoom/crop the image... that all works perfectly fine..

But how can i send the cropped image to a php file as form file input data and access the $_FILES super global array?

I really hope someone can help

This link here tries to do something similar to me but i dont understand how it works, or how i could do the same with my project?

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

UPDATE I managed to solve the problem myself

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

score 1 · Answer 1 · answered Jul 07 '17 at 18:25

1

You'll need to store the canvas (as an image) in a hidden form field as its value and then when you submit your form, the image will be submitted.

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

answered Jul 07 '17 at 18:25

Scott Marcus

64,069
6
49
71

I already did that here `var dataurl = temp_canvas.toDataURL("image/jpeg")` – Javaish Jul 07 '17 at 18:26
The canvas can also be converted to a Blob, right? (Where that's supported.) I think that might be more efficient. The canvas DOM element has a `.toBlob()` API. Then you'd use the file API to send it with the POST. – Pointy Jul 07 '17 at 18:27
But how do i use it in a form so that i can access it with $_FILES... because my file upload depends on the super global $_FILES array -,-' and it is the first time i do something like this :) – Javaish Jul 07 '17 at 18:28
Yes, the .toBlob is what i think i want... but i dont know how to use it, i have read about it here https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob ... but how do i use it and use it with a form is what is confusing me quite a bit – Javaish Jul 07 '17 at 18:29

Javascript - How do i submit a canvas in a form?

1 Answers1