用html5 canvas js 实现图片大小的压缩显示，图片上传后可在线预览。

最新推荐文章于 2025-06-25 11:09:33 发布

st石头先生

最新推荐文章于 2025-06-25 11:09:33 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： html5 canvas 压缩 javascript 图片上传

本文链接：https://blog.youkuaiyun.com/shitou20160901/article/details/52452847

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas和JavaScript编写一个图片压缩并在线预览的功能。通过创建HTML文件，定义CSS样式，以及编写JavaScript代码实现图片的选择、压缩、在Canvas上绘制和预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上查找了好多上传图片的代码，不过bug太多，还不如自己写一个。

首先创建一个html文件

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片压缩--canvas</title>
</head>
<body>
<a class="file"><input type="file" id="fileElem" accept="image/*" onchange="handleFiles(this)">选择</a>
<div class="canvas">
<p>
canvas：
</p>
<canvas id="canvas"></canvas>
</div>
<div id="fileList" class="img-wrap">

<p>
原图：
</p>
</div>
<div id="wrap">
<p>
压缩后：
</p>
</div>
</body>
</html>

创建相关的css代码如下：

.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}

需要引用的JS代码如下：