How to handle image processing with websockets?

[Gustavo_Diaz]

Hello people,

I’m stuck with websockets and image processing, I want to send an image from the client side using either native Websocket or SocketIO and then receive that image in the server and apply it some image filters using this package blind.

I have the following code in the client side:

const file = document.querySelector('#file');
const ws = new WebSocket(`ws://${window.location.host}/ws/upload`);

function handleFile(e) {
    let file = e.target.files[0];
    if (!file) return;
        ws.send(file);
    }
}

file.addEventListener('change', handleFile);
ws.addEventListener('message', e => {
    console.log(e);
});

And using gorilla websockets I have the following:

// Omitting some code
r.HandleFunc("/ws/upload", upload)

func upload(w http.ResponseWriter, r *http.Request) {
	ws, err := upgrader.Upgrade(w, r, w.Header())
	if err != nil {
		logrus.Fatal(err.Error())
		return
	}
	defer ws.Close()
	for {
		msgType, p, err := ws.ReadMessage()
		if err != nil {
			logrus.Fatal(err.Error())
			return
		}
		if err := ws.WriteMessage(msg, p); err != nil {
            logrus.Fatal(err.Error())
 			return
		}
	}
}

The ws.ReadMessage() gives me the message type msgType , p which is the data a slice of bytes (which is also the image), and an error. My problem is that I don’t know how to convert that []byte to an image and then apply it some filters. Any help is welcome and thanks beforehand .

[lutzhorn]

You can decode an image from a []byte by using the functions of the image sub packages. If for example you know that you have a JPEG, you can use jpeg.Decode to decode an image.Image from the []byte wrapped into a bytes.Reader.

package main

import (
	"bytes"
	"fmt"
	"image/jpeg"
	"io/ioutil"
	"log"
)

func main() {
	b, err := ioutil.ReadFile("foo.jpg")
	if err != nil {
		log.Fatal(err)
	}
	r := bytes.NewReader(b)
	img, err := jpeg.Decode(r)
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(img)
}

The image package provides functions to manipulate an image. What exactly do you want filter?

BTW: Most of the code in your question is unrelated to your actual problem. You can safely delete everything related to web sockets. Please take a look at http://sscce.org/ for how to ask even better questions.

[Gustavo_Diaz]

Yes I’m using imgio package for doing what you’re just telling me, and thanks for the advice about the question format but I wrote it like this because most of the time people tell me to write more code but thanks I’ll read that article.

When I mention firter I am refering to sephia, blur, gaussian, brightness and so on filters.