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

Question

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

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

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

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

我的应用完全是客户端的，一切都在浏览器中完成，所以对我来说完美的场景是：

1. 发送waveform_url到可以生成canvas/svg/等的库。
2. 或者我自己从waveform_url获取数据并提供给图书馆。
3. 此外，将 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

要添加到@XGreen's answer，请尝试在第 19 行之后将以下内容插入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 来合并此更改。