简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim> Web-Frontend> HTML-Tutorial> Hauptteil

使用canvas压缩图片的具体步骤

王林
Freigeben： 2020-10-30 17:13:07
nach vorne
3132 Leute haben es durchsucht

使用canvas压缩图片的具体步骤

使用canvas压缩图片的步骤：

（视频教程推荐：html视频教程）

1、拿到图片元素

2、绘制一个空白的canvas

3、将图片绘制在canvas上

4、将canvas转成base64（这里调用的方法可以实现压缩，base64就可以直接放入src或者传入后端、转成别的格式传输等。）

代码实现：

     Document 

    //待会压缩完的图片放入这里。
Nach dem Login kopieren

效果对比：

压缩前

be4fddbd7ee900b46e21c387a40522e.png

压缩后：

d18fe1c4af6bae7b890159869771bad.png

相关推荐：html教程

Das obige ist der detaillierte Inhalt von使用canvas压缩图片的具体步骤. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
canvas 图片
Quelle：csdn.net
Vorheriger Artikel：html中的三种布局分别是什么 Nächster Artikel：怎么在html中插入视频和音频
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
So verhindern Sie, dass das Hintergrundbild beim Ändern flackert Ich wende über JavaScript ein sich wiederholendes Hintergrundbild von der Leinwand auf das...
Aus 2023-10-20 21:38:57
0
2
344
Erfassen von Y-Koordinaten mit touchmove: eine Schritt-für-Schritt-Anleitung Ich versuche, eine mobile App mit HTML, Javascript und Canvas zu erstellen. Grundsätzlich ...
Aus 2023-10-08 10:35:03
0
1
321
Erneutes Rendern mit React.StrictMode und der Canvas-Instanz von fabric.js Ich erstelle eine Stoffleinwand und Schaltflächen, die Formen instanziieren, die auswählba...
Aus 2023-09-21 23:48:52
0
1
464
Erzeugen Sie ein Leinwandbild mit einem lokalen Computer Ich möchte ein Bild in eine auf meinem Laptop laden, damit ich getImageDa...
Aus 2023-09-18 08:44:24
0
1
233
Problem mit nicht genauen Mauskoordinaten: Verwendung von HTML5-Canvas beim Ändern der Seitengröße Ich möchte diesen Pixeleffekt von einem Front-End-Experten erstellen. Obwohl ich den gesam...
Aus 2023-09-12 12:20:33
0
1
280
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！