1. 百科知识问答首页
  2. 互联网

前端 HTML 如何实现图片预览？

大魚 • • 互联网 • 阅读 11

在前端HTML中，可以使用以下两种方式实现图片预览：

  1. 使用<img>标签：通过设置<img>标签的src属性来实现图片预览。
htmlCopy code<input type="file" id="imageInput"> <img id="previewImage"> <script> const imageInput = document.getElementById('imageInput'); const previewImage = document.getElementById('previewImage'); imageInput.addEventListener('change', (event) => { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { previewImage.src = e.target.result; }; reader.readAsDataURL(file); }); </script>
  1. 上述代码中，当用户选择文件后，通过FileReader对象读取文件内容，并将结果以Data URL形式赋给<img>标签的src属性，从而实现图片预览效果。
  2. 使用<canvas>标签：通过绘制图片到<canvas>上来实现图片预览。
htmlCopy code<input type="file" id="imageInput"> <canvas id="previewCanvas"></canvas> <script>const imageInput = document.getElementById('imageInput'); const previewCanvas = document.getElementById('previewCanvas'); const ctx = previewCanvas.getContext('2d'); imageInput.addEventListener('change', (event) => { const file = event.target.files[0];const reader = new FileReader(); reader.onload = (e) => { const img = new Image(); img.onload = () => { previewCanvas.width = img.width; previewCanvas.height = img.height; ctx.drawImage(img, 0, 0); }; img.src = e.target.result; }; reader.readAsDataURL(file); }); </script>
  1. 上述代码中，当用户选择文件后，通过FileReader对象读取文件内容，并将结果以Data URL形式赋给新创建的<img>标签的src属性。然后在<img>标签加载完成后，将其绘制到<canvas>上，从而实现图片预览效果。

无论是使用<img>标签还是<canvas>标签，都需要借助JavaScript来实现文件读取和图片展示的逻辑。通过这两种方式，可以实现简单且灵活的图片预览功能

本作品（图文、音视频）由用户自行上传分享，仅供网友学习交流。若您的权利被侵害，请联系 yu.jianchun@qq.com

赞 (0)
大魚大魚推荐达人
0
« 上一篇 2023-12-05 13:37
下一篇 » 2023-12-05 13:40

相关推荐