ぼやけずにHTML5で画像を大きくする方法はありますか?
たとえば、次の画像は 24x24 です。
代わりに幅 150 でロードすると、ぼやけてしまいます。ドット絵が欲しい!
http://png-1.findicons.com/files/icons/734/phuzion/24/bug.png
代わりに、Photoshop で表示されるようにレンダリング エンジンを変更したいと考えています。このようなもの:
私は最新のブラウザしか気にしません。
ぼやけずにHTML5で画像を大きくする方法はありますか?
たとえば、次の画像は 24x24 です。
代わりに幅 150 でロードすると、ぼやけてしまいます。ドット絵が欲しい!
http://png-1.findicons.com/files/icons/734/phuzion/24/bug.png
代わりに、Photoshop で表示されるようにレンダリング エンジンを変更したいと考えています。このようなもの:
私は最新のブラウザしか気にしません。
ブラウザに任せれば、最近では可能な限りスムーズにしようとします (古い IE バージョンではそうではありませんでした)。したがって、最善の策は、それをキャンバスにロードし、(最近傍) アップスケーリングを自分で行うことです。私はこれが正気の考えだと言っているのではなく、ただそれを世に出しているだけです。:)
それか、複数のバージョンのイメージを持っていて、何らかの方法でそれらを切り替えます。CSS の引き戸など、いくつかのテクニックを試すことができます。
いくつかの調査の後、残念ながら、やりたいことはブラウザ固有の制限によって制限されています。Firefox には(image-rendering)
、ブラウザーがピクセルの補間を強制的に停止してぼやけを引き起こす可能性がある限定的な実験的コードがあります。
残念ながら、現在これを行う方法は他にサポートされていません。元の投稿の編集で行ったように、画像を単純に拡大縮小することをお勧めします。
このような:
Mozilla のドキュメント ページ: https://developer.mozilla.org/en-US/docs/CSS/image-rendering