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

作者：笔触狂放9 | 2024-03-13 05:26:49

踩

cropper base64转图片地址

今天要写上传图片功能，研究了一下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)">
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/228004