html+js+canvas实现图片上传，下载

最新推荐文章于 2022-12-12 08:45:00 发布

this指向谁

最新推荐文章于 2022-12-12 08:45:00 发布

阅读量466

点赞数

分类专栏： HTML+js效果文章标签： html javascript

本文链接：https://blog.csdn.net/qq_43258005/article/details/105088007

版权

本文介绍如何利用HTML、JavaScript和Canvas技术来实现图片的上传与下载功能。通过HTML提供上传界面，JavaScript处理文件选择和上传逻辑，Canvas用于预览和处理图片，最终实现完整的图片操作流程。

摘要由CSDN通过智能技术生成

html

<input type="file" id="file_btn">
<canvas id="canvas" style="border:1px solid #c3c3c3;"></canvas>
<div id="downImg" style="cursor: pointer;text-align: center;color: cadetblue;">下载图片</div>

let file_btn = document.getElementById('file_btn');
let canvas = document.getElementById('canvas');
// 给定canvas在页面的占位，图片大于则宽高等比例缩小
canvas.width = 540;
canvas.height = 420;
// 1.监听文件上传按钮的选择文件的事件
file_btn.addEventListener("change", function () {
   
   let data_url = file_btn.files[0];
   console.log(data_url);
   // 2.使用FileReader类来读取文件内容
   let reader = new FileReader();
   reader.readAsDataURL(data_url);
   // 3.监听FileReader读取器读取完成事件（此事件后才可以获取到文件内容，进行图片渲染或上传）
   reader.onload = function () {
   
       //