目前我正在使用 Waveform.js (http://waveformjs.org http://waveformjs.org)从 SoundCloud 轨道生成波形。
不幸的是生成的canvas
图像质量非常低(尤其是在视网膜上):
我想创建与 Soundcloud 非常相似的 Waveform:
您知道如何提高图像质量吗?也许有更好的解决方案来生成此类波形?
我的应用程序完全是客户端的,一切都在浏览器中完成,所以对我来说完美的场景是:
- Send
waveform_url
到可以生成的库canvas
/svg
/etc.
- 或者从以下位置获取数据
waveform_url
我自己并把它送到图书馆。
- 同步 HTML5 也很棒
Audio
元素与生成的波形一起播放。
我将不胜感激任何意见和建议。谢谢!
我没有看过这个库的代码。但总体原则上
//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)
阅读库代码并查看在哪里可以添加此比率支持。希望这可以帮助。
这也是参考/样本 http://blog.tripleaxis.com/optimising-html5-canvas-elements-for-retina-screens/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)