jquery裁剪图片

最新推荐文章于 2024-08-16 08:05:40 发布

艾呀艾

最新推荐文章于 2024-08-16 08:05:40 发布

阅读量794

点赞数

本文链接：https://blog.csdn.net/weixin_42027503/article/details/108883323

版权

该项目需求涉及图片上传并按固定尺寸裁剪，通过整合前端资源，已成功实现适用于PC和移动端的功能。以下是关键的HTML样式、CSS及独立JS文件的js代码，供日后参考。

摘要由CSDN通过智能技术生成

近期项目需要做一个上传图片且能够根据固定大小剪切图片的功能，参考网上各路大神的做法，最终做出来啦，pc端与手机端都能适用，为了以后方便把它记录下来~

html 样式可根据自己的项目需求修改

<!--剪切图片-->
    <div class="hovertreecontainer">
        <div class="imageBox">
            <div class="thumbBox"></div>
            <div class="spinner" style="display: none">Loading...</div>
        </div>
        <div class="action">
            <span class="cancel">取消</span>
            <!--            <span id="btnZoomIn" class="Btnsty_peyton">+</span>-->
            <!--            <span id="btnZoomOut" class="Btnsty_peyton">-</span>-->
            <span id="btnCrop"  class="Btnsty_peyton">确定</span>
        </div>
        <!--    <div class="cropped"></div>-->
    </div>
    <!--剪切图片end-->

css

/*剪切图片*/
        .upload-file{
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        .hovertreecontainer {
            width: 100%;
            margin: 0 auto;
            position: fixed;
            font-family: 微软雅黑;
            font-size: 12px;
            /*background: #000;*/
            height: 100%;
            top: 0;
            display: none;
            z-index: 11111;
        }
        .hovertreecontainer p {
            line-height: 12px;
            height: 0px;
            margin: 10px;
            color: #bbb
        }
        .action {
            width: 100%;
            height: 30px;
            margin: 10px 0;
            position: absolute;
            bottom: 66px;
            z-index: 12;
            color: #0CCF67;
            font-size:2.15rem;
            display: flex;
            justify-content: space-between;
            /*padding: 0 0.3rem;*/
            padding: 0 34rem 15rem 34rem;
            cursor: pointer;
        }
        .cropped {
            position: absolute;
            right: -230px;
            top: 0;
            width: 200px;
            border: 1px #ddd solid;
            height: 460px;
            padding: 4px;
            box-shadow: 0px 0px 12px #ddd;
            text-align: center;
        }