用cropper.js裁剪图片并上传到服务器，解析base64转存图片到本地

本文介绍了如何结合cropper.js实现图片裁剪，并将裁剪后的图片以base64格式上传到服务器，最终在服务器端将base64转换为图片保存。

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

今天要写上传图片功能，研究了一下cropper。将图片上传服务器并保存到本地

html


<html>
<head>
    <title>基于cropper.js的图片裁剪</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="/css/ImgCropping.css">
    <link rel="stylesheet" href="/css/cropper.min.css">
</head>
<body style="background: #eee">

<button id="replaceImg" class="l-btn">更换图片</button>
<div style="width: 320px;height:136.23px;border: solid 1px #555;margin-top: 10px">
    <img id="finalImg" name="file" src="" width="100%">
</div>
    <button type="button" onclick="update()">submit</button>


<!--图片裁剪框 start-->
<div style="display: none" class="tailoring-container">
    <div class="black-cloth" onclick="closeTailor(this)"></div>
    <div class="tailoring-content">
        <div class="tailoring-content-one">
            <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
                选择图片
            </label>
            <div class="close-tailoring"  onclick="closeTailor(this)">×</div>
        </div>
        <