Canvas in JPG umwandeln

[pimbolie1979]

Hallo Leute,

ich möchte einen Bilderupload erstellen. Dieser soll wie folgt aussehen:

1. Es wird die Datei ausgewählt.
2. Nach der Dateiauswahl erscheint ein kleines Vorschaubild. Dies habe ich bis jetzt so gelöst das ich ein leeres JPG Kontainer benutzt haben und dann das src Atrribute verändert habe.
3. Den Upload mit Ajax habe ich auch schon hinbekommen.
4. Als nächste wollte ich mich an das Image-Resize Problem machen, damit die Dateigröße vor dem Upload verkleiner wird. Dies habe ich auch schon mit Hilfe eines HTML Canvas hinbekommen.

Das Problem ist nun das ich aus den Canvas kein JPG erzeugen kann. Der JPG Container bleibt immer schwarz.

Ich habe es bis jetzt wie folgt gemacht:

[INLINE]
// 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()
{
var W = image.width;
var H = image.height;

// Load the Canvas & Context
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

canvas.width = W;
canvas.height = H;

// Draw the image
context.drawImage(image, 0, 0);

//resize by ratio
var ratio = 0.5; //from 0 to 1
resample_hermite(canvas, W, H, Math.round(W*ratio), Math.round(H*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();
image_new.src = canvas.toDataURL("image/jpeg", 1.0);

$(".prevImg1").attr("src",image_new.src);

image_new.src = event.target.result;

Hier muss der Fehler sein das JPG Bild ist immer schwarz

}
readImage.readAsDataURL(file);



[/INLINE]

 

[methosiea]

Achte darauf das du jQuery nicht mit normal Javascript Funktionen vermischt. Danach solltest du auf den Execution Context achten. Du hast canvas innerhalb einer Funktion onload definiert und ausserhalb aufgerufen, sowas geht nur im global scope.

// 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();
  
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
  
    // Assign the image data as the source - as we are using a data URL
    image.src = event.target.result;

    image.onload = function() {
        var W = image.width;
        var H = image.height;

        // Load the Canvas & Context
      

        canvas.width = W;
        canvas.height = H;

        // Draw the image
        context.drawImage(image, 0, 0);

        //resize by ratio
        var ratio = 0.5; //from 0 to 1
        resample_hermite(canvas, W, H, Math.round(W * ratio), Math.round(H * 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();
    image_new.src = canvas.toDataURL("image/jpeg", 1.0);

    $(".prevImg1").attr("src", image_new.src);

    image_new.src = event.target.result;


}
readImage.readAsDataURL(file);