HTML5 MUI 手机预览图片，裁剪上传base64，保存数据库

最新推荐文章于 2025-06-24 10:21:39 发布

云上人间钦自赏

最新推荐文章于 2025-06-24 10:21:39 发布

阅读量2.9w

点赞数 12

CC 4.0 BY-SA版权

分类专栏： MUI

本文链接：https://blog.youkuaiyun.com/moniteryao/article/details/47984703

本文介绍了如何使用HTML5和MUI在手机上预览图片，并通过裁剪功能将图片转化为base64编码，进一步上传到服务器的Asp.net后台并保存至数据库。涉及到的关键技术包括HTMLCanvasElement的toDataURL方法和cropper.js库。

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

app和网站页面都可以使用

需要的文件：

这些都需要，这些文件在下文的参考网址可以下载

页面头部引用：

<link rel="stylesheet" href="js/imagecropper/bootstrap.min.css" />
<link rel="stylesheet" href="js/imagecropper/cropper.css" />

页面底部引用（但是在body里）：

<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script src="js/mui.min.js"></script>
<script type="text/javascript" src="js/pet.js"></script>
<script type="text/javascript" src="js/imagecropper/jquery.min.js"></script>
<script type="text/javascript" src="js/imagecropper/bootstrap.min.js"></script>
<script type="text/javascript" src="js/imagecropper/cropper.js"></script>

布局：

<div id="changeAvatar" class="touxiang" onclick="showActionSheet()">//触发选择图片事件
	<img src="images/dogimg.png">//默认图片以及选择裁剪后展示的效果
</div>
<div style="width:90%;margin: 0 auto;margin-top:30px;">
	<button type="button" class="mui-btn mui-btn-primary mui-btn-block" style="height: 40px;" onclick="postAvatar()">确认提交</button>//保存数据事件
</div>
<div style="text-align: center;z-index: 99;width: 100%;height: