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.
Related
I'm working on a web editor app that generates SVG Images.
I allow users to upload bitmap images as base64 into the editor.
The Problem is, that if a user uses an image multiple times, the SVG file size increases far too much.
With the SVG format, it's possible to reuse images (<use href="ID">). Is there a possibility to do this in fabric.js?
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
I've created an web app that client can upload an svg file, the app will create a progressive draw animation from that file, and then create a downloadable video from that animation.
I'm using Progressive Draw - SVG for the progressive draw animation.
Are there any ways to convert this to an video file or just record this in the screen to render a video file? I was using RecordRTC to record the animation but it seems that this can't record the SVG format as the video is all blank.
Any suggestion? Thanks in advance!
I'm trying to display a 16-bit tiff image in a html5 canvas, I found this library seikichi/tiff.js and it works well but my images are dark, the pixel values are in the range [0- 300] then the image is quantized badly, the canvas displays a black image. I have tried other alternatives but I have the same problem. Is there any way to implement the quantization? Could suggest another solution or library?
PD: I get the image from a node.js server using ajax
Thanks!!
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.