[GELÖST] 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:

// 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;
			}
			readImage.readAsDataURL(file);

- - - Aktualisiert - - -

Ich habe den Fehler selber gefunden:

Hier mein Quellcode:

// 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.1; //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);					
				}				
			}

Ich muste den Code nur in die readImage.onload = function(event) Funktion verschieben dann hat es funktioniert.

 

[xorg1990]

Hallo pimbolie1979,

Das Problem ist nun das ich aus den Canvas kein JPG erzeugen kann.

Ah seh gerade selber gelöst. Trotzdem:
Genaugenommen erzeugst du aus den canvas auch kein jpg sonder ein base64 Binary.
Wenn du aus den canvas Pixeldaten ein vollwertigen jpg erzeugen willst brachst du ein jpeg encoder.
z.B:
https://github.com/owencm/javascript-jpeg-encoder/blob/master/jpeg_encoder_basic.js

Nicht das dich das später mal irreführt mit den speichern der Bilder auf den Server.

 

[kkapsner]

Doch, das ist ein "vollwertiges" JPEG. Die Daten werden nur in Form einer Data-URL zurückgegeben. Um daraus jetzt die echten Bits und Bytes zu bekommen, muss man den Header (also das "data:image/jpeg;base64,") entfernen und dann den Rest durch atob() jagen.

 

[xorg1990]

muss man den Header (also das "data:image/jpeg;base64,") entfernen und dann den Rest durch atob() jagen.

Ach ja stimmt, da war ja noch was.