当前位置:Gxlcms > JavaScript > 移动端cropper.js如何实现裁剪图片并上传(代码分析)

移动端cropper.js如何实现裁剪图片并上传(代码分析)

时间:2021-07-01 10:21:17 帮助过:4人阅读

本篇文章给大家带来的内容是关于移动端cropper.js如何实现裁剪图片并上传(代码分析) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

引入cropper使用

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

HTML结构

<li class="ui-border-bottom">
    <a href="javascripts:void(0);">头像
        <span class="pull-right user-header">
            <img class="rounded" id="avatar" src="../images/user.jpg" alt="avatar">
            <input type="file" class="sr-only" id="input" name="image" accept="image/*">
        </span>
    </a>
</li>

<!--头像截图弹窗-->

<div class="common-layer" id="modal">
    <div class="layer-content">
        <div class="layer-title">
            <span class="cancel-btn" id="cancle">取消</span>
            <h4>截图头像</h4>
        </div>
        <div class="layer-area">
            <div class="img-container">
                <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
            </div>
            <a class="ui-btn m-t-15" id="crop" href="javascripts:void(0);">保存</a>
        </div>
    </div>
</div>

js引用:
具体cropper.js 使用可查看官网

$(function() {
    //修改头像 参加文件

javascript - 如何在手机端实现裁剪图片+上传功能

以上就是移动端cropper.js如何实现裁剪图片并上传(代码分析)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行