问题描述
目前,我使用Waveform.js(,尝试将以下内容插入第19行之后:
#高DPI画布
devicePixelRatio = window.devicePixelRatio || 1
backingStoreRatio = @ context.webkitBackingStorePixelRatio || @ context.mozBackingStorePixelRatio || @ context.msBackingStorePixelRatio || @ context.oBackingStorePixelRatio || @ context.backingStorePixelRatio || 1
@ratio = devicePixelRatio / backingStoreRatio
if devicePixelRatio isnt backingStoreRatio
@ canvas.width = @ratio * @width
@ canvas.height = @ratio * @height
@ canvas.style.width =#{@ width} px
@ canvas.style.height =#{@ height} px¥b $ b @ context.scale @ratio,@ratio
我创建了一个以合并此更改。
Currently I'm using Waveform.js (http://waveformjs.org) to generate waveforms from SoundCloud tracks.
Unfortunately the generated canvas
has a very low image quality (especially on Retina):
I would like to create Waveform very similar to the Soundcloud one:
Do you know how can I improve the quality of an image? Maybe there's a better solution for generating such waveforms?
My app is completely client-side, everything is done in the browser, so perfect scenario for me will be:
- Send
waveform_url
to the library which can generatecanvas
/svg
/etc. - Or get the data from
waveform_url
by myself and feed it to the library. - Also it will be superb to sync HTML5
Audio
element playing together with generated waveform.
I'll appreciate any input and suggestions. Thanks!
To add on to @XGreen's answer, try inserting the following into waveform.coffee after line 19:
# High DPI Canvas
devicePixelRatio = window.devicePixelRatio || 1
backingStoreRatio = @context.webkitBackingStorePixelRatio || @context.mozBackingStorePixelRatio || @context.msBackingStorePixelRatio || @context.oBackingStorePixelRatio || @context.backingStorePixelRatio || 1
@ratio = devicePixelRatio / backingStoreRatio
if devicePixelRatio isnt backingStoreRatio
@canvas.width = @ratio * @width
@canvas.height = @ratio * @height
@canvas.style.width = "#{@width}px"
@canvas.style.height = "#{@height}px"
@context.scale @ratio, @ratio
I've created a pull request to merge this change.
这篇关于从SoundCloud的Waveform.js库获得更好的质量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!