Javascript – Probleme bei der Verarbeitung von Canvas-Bildern
扔个三星炸死你
扔个三星炸死你 2017-06-10 09:49:16
0
3
1026

Ich muss Canvas verwenden, um ein vom Benutzer hochgeladenes Bild zu verarbeiten. Die vom Benutzer hochgeladene Größe kann beispielsweise sehr groß sein und die Breite und Höhe des aktuellen Browserfensters überschreiten. Daher skaliere ich es proportional zum Sichtbaren Zeichnen Sie es dann auf die Leinwand. Dies entspricht jedoch einer Verkleinerung des Bildes des Benutzers. Gibt es eine Möglichkeit, das verarbeitete Bild auf seine ursprüngliche Größe zurückzusetzen, ohne dass es zu Unschärfe kommt?

Ich bin wirklich überzeugt. Wer wird Gu Yue und Jack einen Daumen hoch geben? Was sie sagten, ist die richtige Methode!

扔个三星炸死你
扔个三星炸死你

Antworte allen(3)
左手右手慢动作

canvas的width和height都设置成和图片原始大小一样,但是使用style将canvas缩放在可视区域。这样就不会对图片进行压缩

仅有的幸福

感谢你的邀请,虽然我很想回答你,但我没试过,所以也不知道。当然你可以自己去试试,反正花不了多少时间。
不过我们可以换一种思维,为什么你要去缩小图片然后绘制到canvas上?
将图片缩放到可视区域范围内不是一个max-width或者max-height不就搞定了吗?这只是图片表面上被缩小了,实际上的naturalWidth和naturalHeight是没变的,所以缩放还原其实是多此一举。
你展示在浏览器可视区域内用img就可以,不要用canvas,canvas是用来处理图片的。 如果你非得展示canvas正在处理中的图片,那你另外创建一个离屏canvas就行,然后把相关的处理等比缩放弄上去就可以,最后保存离屏canvas就行。
不知道我有没有讲清楚。

洪涛

HTML5 之图片上传预处理https://juejin.im/entry/5933e...

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage