基于HTML5头像截切上传

最新推荐文章于 2021-06-08 20:35:47 发布

原创

最新推荐文章于 2021-06-08 20:35:47 发布 · 3.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#头像上传 #html5

这篇博客介绍了如何利用HTML5的fileReader和canvas实现头像截切上传功能。通过读取本地文件，渲染到画布上进行缩放和截取，截取后的图片以base64字符串形式发送到后端，后端解析base64并保存为文件在服务器上。

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

基于HTML5头像截切上传

先看效果：
这里写图片描述

实现的原理就是使用了html5提供的fileReader读取了本地系统的文件，然后使用画布渲染出来，可以点击缩小放大，当点击截切时就截取画布里的图片数据，详细了解可以查看cropbox.js里的实现，这个截切之后可以拿到的是base64后的字符串，可以把这个字符串传给后台，然后在后台再用base64反解码，然后就拿到了byte[], 然后再输出为文件保存在服务器上就实现了上传功能。代码如下：
前端：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery新浪微博头像裁切预览代码</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="js/cropbox.js"></script