We Keep Coding

Color Matrix to sharpjs/ image processing lib

Hello I was wondering if anyone knew how to apply filters on an image using sharpjs(preferably) or any image processing lib with a nodejs SDK using only a colorMatrix. The two inputs I have are the input image and the 4 x 5 color matrix and I want to transform the input image using the color matrix. For context, I can do transformations in the web browser canvas API using feColorMatrix tag but I want to actually manipulate the image on the backend now. Has anyone got any experience with this?

Q: How to display an image generated in Unity on a phone controller using HappyFunTimes?

I'm making a game for a school project, and we have been tasked to create a game using the HappyFunTimes plugin for Unity. For the game my group is making, we need to generate a random sprite image in a C# script in Unity, and get the sprite to display in the upper middle of the phone's controller screen. Unfortunately, at this point in my education I'm only familiar with C# so I'm having trouble working through the HappyFunTimes's game-pad code. Any help would be appreciated.

I don't know how to generate an image in Unity. I know last time I checked there was no easy 2D API for direct rendering (as in draw a line, draw a rectangle, draw a circle, etc...)
You can render a scene to a texture though, see render texture, render to it, and then get the data out.
Or if you could just create an array and set values if it's a small image. (for example the gravatar images here on SO or a QR code).
Once you have the data you'd need to base64 encode it there should be some C# functions to do that. Then you can send it to the phone. On the phone you'd need to decode it, put it in an ImageData then you can copy it into a canvas with putImageData
You can then either display that canvas as is, OR, use it to draw into another canvas, OR, generate a dataURL for an image. All of that will have to be in JavaScript/HTML/CSS not C#
... although you could make C# send a dataURL directly and skip the decoding, imagedata, and canvas parts. Just assign the image's src property to the dataURL

Vectorize image drawing on canvas

There is image, that loaded from server, that I draw on canvas.
Image is 2 color, and there is polygon drawing on it,
0 - transparent color(no color) and yellow.
How to trace boundaries of polygon?
I know, that it is realy difficult question. Moore Neighborhood. is only one think that i have found.

javascript has no good performance to deal with image arrays, and for this reason is hard do find frameworks to do complex image detections. I suggest you to use a strong and low level image framework in your server side (upload pic to your server and just send back the results in numbers). If you need to draw your poligon, you can use svg graphics, they are fully compatible with most browsers and very easy to write in vector.
Here is something about get image boundaries:
http://docs.opencv.org/master/d4/d73/tutorial_py_contours_begin.html#gsc.tab=0

Create Thumbnail of MP3 Waveform in HTML5 Canvas

I would like to create a WaveForm image from an MP3 file on my server.
I have tried using the wavesurfer.js plugin. I would rather do it without a plugin, but I cannot find a tutorial or any good resources.
Now, I would like save a thumbnail of the waveform (from mp3 file) on my server. As wavesurfer.js uses an HTML5 Canvas, I don't know how to create a thumbnail of the waveform. How can I create a thumbnail?

This article explains how they got audio wave form images in the browser.
http://www.bbc.co.uk/rd/blog/2013/10/audio-waveforms
This can be used to interact with, generate etc. waveform data (e.g. into JSON).
https://github.com/bbcrd/peaks.js
This can be used for drawing in the canvas.
https://github.com/bbcrd/waveform-data.js
You can created a thumbnail by scaling the canvas image down to the desired size and then uploading this to your server, although the same is true for wavesurfer.js
You can use http://www.w3schools.com/tags/canvas_scale.asp to scale canvas images. You can alter the canvas size using it's width and height properties.

Exporting png/svg as a single png file using PHP

So basically I have use SVG/javascript/PHP so that when a user clicks on a PNG image it takes the coordinates and uses these to plot a small black square on the PNG image, it's really very simple.
However, I was wondering if it's possible if you have the PNG in tags within the SVG element, and the filled square on top of the PNG image (made using SVG 'rect'), to save this as 1 single PNG?

You should probably go through a simple canvas tutorial. I suggest checking the Mozilla (mdn) tutorials‌​. Canvas isn't very hard to work with. For a quick idea of what you will need, check out this tutorial about drawing a rectange and to save the image you can access the canvasElement.toDataURL() method to get a base64 encoded string of the image on the canvas. To save to user you can location.href=dataURL; or post it to a sever using ajax.