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

Question

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

不幸的是，生成的canvas图像质量很低(特别是在Retina上)：

​

我想创建非常类似于Soundcloud one的波形：

​

​

你知道怎样才能提高形象的质量吗？也许有更好的方法来产生这样的波形？

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

1. 将waveform_url发送到可以生成canvas/svg/etc的库中。
2. 或者自己从waveform_url获取数据并将其提供给库。
3. 同时，将HTML5 Audio元素与生成的波形同步将是极好的。

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

Answer 1

若要添加到@XGreen的回答，请尝试将以下内容插入到第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

我创建了一个拉请求来合并这个更改。

Answer 2

我还没看过这个库的代码。但一般原则上

//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)

阅读库代码，并查看在哪里可以添加此比率支持。希望这能有所帮助。

这里也是一个参考/示例