Konvertierung von bytes, um ein Bild für die Zeichnung auf einem HTML5-canvas
Weiss jemand, wie ich den konvertieren bytes, die gesendet werden über eine websocket (aus einer C# - app) ein Bild? Dann möchte ich zum zeichnen des Bildes auf einer Leinwand. Ich sehe zwei Möglichkeiten, dies zu tun:
- Irgendwie zeichnen das Bild auf der Leinwand in byte-form, ohne Sie zu konvertieren
es. - Umwandeln der bytes zu base64-string irgendwie im javascript dann
ziehen.
Hier ist meine Funktion, die empfängt die bytes, die für die Zeichnung:
function draw(imgData) {
var img=new Image();
img.onload = function() {
cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
};
//What I was using before...
img.src = "data:image/jpeg;base64,"+imgData;
}
Ich erhielt das Bild schon umgewandelt als base64-string vor, aber nach dem lernen, dass das senden der bytes ist in der Größe kleiner (30% kleiner?) Ich würde es vorziehen, diese zu erhalten zu arbeiten. Ich sollte auch erwähnen, dass das Bild ist ein jpeg.
Jemand weiß, wie ich es tun würde? Vielen Dank für die Hilfe. 🙂
- Nicht diese Einstellung als eine Antwort, denn es ist nur eine Vermutung, aber könnten Sie lassen Sie die
;base64
ab undescape(imgData)
? - Hat nicht funktioniert, aber danke. 🙂
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Ihr Bild ist wirklich ein jpeg bereits, können Sie einfach konvertieren die empfangenen Daten in eine base64-stream. Firefox und Webkit-Browser (soweit ich mich erinnere) haben eine bestimmte Funktion,
btoa()
. Es konvertiert den input-string in einen base64 codierten string. Sein Gegenstück istatob()
dass genau das Gegenteil tut.Könnten Sie es wie folgt:
Wenn der browser Sie als Ziel (also zum Beispiel) ist nicht Firefox oder Webkit, können Sie verwenden Sie eine der mehrere conversion-Funktion liegen rund um das internet (gut, es bietet auch Statistiken, Auftritte in mehreren Browsern, wenn du interessiert bist 🙂
Habe ich diese am Ende:
Musste ich Lesen die bytes in einen string, bevor Sie mit btoa().