从 SoundCloud 的 Waveform.js 库中获得更好的质量

Question

目前我正在使用 Waveform.js (http://waveformjs.org) 从 SoundCloud 轨道生成波形。

不幸的是，生成的 canvas 图像质量非常低（尤其是在 Retina 上）：

我想创建与 Soundcloud 非常相似的波形：

您知道如何提高图像质量吗？也许有更好的解决方案来生成这样的波形？

我的应用程序完全 client-side，一切都在浏览器中完成，所以对我来说完美的场景是：

发送waveform_url到可以生成canvas/svg等的库
或者自己从waveform_url那里取数据，然后送入图书馆。
另外，同步HTML5 Audio 元素与生成的波形一起播放也是极好的。

如有任何意见和建议，我将不胜感激。谢谢！

Answer 1

我没看过这个库的代码。但总的来说

//if canvas context is:
var context = canvas.getContext('2d');

//then the device ratio can be calculated using:
var     devicePixelRatio = window.devicePixelRatio || 1,
        backingStoreRatio = context.webkitBackingStorePixelRatio ||
                            context.mozBackingStorePixelRatio ||
                            context.msBackingStorePixelRatio ||
                            context.oBackingStorePixelRatio ||
                            context.backingStorePixelRatio || 1,

        ratio = devicePixelRatio / backingStoreRatio;

//now you can scale your canvas and for retina display I think it will be 2 and 2

context.scale(ratio, ratio)

阅读库代码并查看可以在何处添加此比率支持。希望这有帮助。

Here is also a reference/sample

Answer 2

在第 19 行之后添加到 , try inserting the following into waveform.coffee：

# 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

我创建了一个 pull request 来合并此更改。

从 SoundCloud 的 Waveform.js 库中获得更好的质量

Get better quality from SoundCloud's Waveform.js lib

javascript

svg

waveform

canvas

soundcloud