JPEG per Ajax auf den Server uploaden

[pimbolie1979]

Hallo Leute ich habe bereits ein Scrip geschrieben, mit dem ich eine Datei auswählen kann. Diese wird dann in einen unsichtbaren Canvas Container gespeichert und resampled. Dadurch wird die Bildgröße deutlich reduziert. Außerdem kann ich auch aus den verkleinerten Bild ein JPEG erzeugen und die als Vorschaubild anzeigen. Wenn ich jedoch den Upload Button klicke weiß ich nicht mehr weiter.

Früher habe ich das Bild aus den Input Feld genommen und mit AJAX hochgeladen. Jedoch habe ich bei den ganzen Formaten den Überblickt verloren.

Die Frage ist jetzt wie kann ich den Inhalt von meinem Canvas Container oder das JPEG Bild mit Ajax auf meinem Server hochladen. Auf PHP Server erwarte ich ein JPEG Bild dies soll dort auch gespeichert werden.

Hier ist mein Quellcode:

$("#selected_file").change(function()
    {

        var file = document.getElementById("selected_file").files[0];

        console.log("Filename: " + file.name);
        console.log("Type: " + file.type);
        console.log("Size: " + file.size + " bytes");
       
        // Prüfen ob es sich bei der Datei um ein Bild handelt
      if(!file.type.match("image/jpeg"))
        {           
            console.log("Bei der Datei handelt es sich nicht um ein JPEG Bild");
      }
        else
        {                   
            // Ein neues Objekt erstellen
            var readImage = new FileReader();
   
            // Sofern die Datei komplett in den RAM eingelesen wurde wird eine Funktion ausgeführt.
            readImage.onload = function(event)
            {
                //$(".prevImg").attr("src",event.target.result).fadeIn(2000);

                // Create a New Imgae
                var image = new Image();

                // Assign the image data as the source - as we are using a data URL
                image.src = event.target.result;
               
                image.onload = function()
                {                   
                    // Access to an hidden canvas element by using the getElementById function
                    var canvas = document.getElementById("canvas");
                   
                    // Set the canvas mode to 2D
                    var context = canvas.getContext("2d");

                    canvas.width = image.width;
                    canvas.height = image.height;

                    // Draw the slected image in canvas container (aspect ratio = 1 to 1)
                    context.drawImage(image, 0, 0);
                   
                    //resize the canvas content by fixed aspect ratio (from 0 to 1)
                    var aspect_ratio = 0.5;

                    // Resample the image and use the hermite filter
                    resample_hermite(canvas, image.width, image.height, Math.round(image.width * aspect_ratio), Math.round(image.height * aspect_ratio));
   
                    //resize manually
                    //resample_hermite(canvas, W, H, 439, 222);
                                       
                    // When it's loaded, we'll send the image data to the canvas method
                    //canvasLoadImage(event.target.result);

                    var image_new = new Image();
               
                    // Convert the canvas content to a jpeg image
                    image_new.src = canvas.toDataURL("image/jpeg", 1.0);
               
                    $(".prevImg").attr("src",image_new.src);
                }

               

               
            }
            readImage.readAsDataURL(file);
        }
    })

Und hier meine Upload Funktion:

$("#upload_button").click(function()   
    {
        console.log("The upload button was clicked!");
       
        var upload_file = new FormData();    // Ein neues Daten-Objekt erstellen
        upload_file.append("file", $("#selected_file")[0].files[0]); // Die Daten an das Daten-Objekt anhängen

        // Ajax-Call
        $.ajax(
        {
            url: "/php_scripte/fotos_hochladen.php",    // Wohin soll die Datei geschickt werden?
            data: upload_file,
            type: "POST",
            processData: false,
            contentType: false,
            success: function(php_return_value)
                        {
                            var obj = JSON.parse(php_return_value);

                            if(obj.status == "OK")
                            {
                                console.log("Hallo Michael");
                            }

                            console.log("SUCCESS: " + obj.message);
                            console.log(php_return_value);

                            // Replace the preview image with the default image
                            $(".prevImg").attr("src", "/bilder/placeholder_600x400.svg");

                            // Reset the input-file element to default value
                            $("#selected_file").val("");
                            console.log("The file was successfully uploaded to server!");

                            //$("#bilder_tabelle tr:last").after('<tr> <td><canvas id="cc" width="200" height="200"></canvas></td> <td>column 2 value</td> <td>column 3 value</td> </tr>');

                           

                           
                            /*
                            var url = URL.createObjectURL("#selected_file")[0].files[0]);

                            var img = new Image();
                            img.src = url;

                            img.onload = function()
                            {
                                context.drawImage(img, 20, 20);
                            }
                            */

                           
                        },
            error:    function()
                        {
                            console.log("The file could not be successfully uploaded to server!");
                        }
       
           
           
            /*success: function(response){console.log(response.status)}*/
        });
    });