javascript - 从 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