jquery插件cropper使用笔记

企业印章上传与裁剪

最新推荐文章于 2025-09-14 08:34:42 发布

原创最新推荐文章于 2025-09-14 08:34:42 发布 · 759 阅读

0 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

93 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的企业印章上传与在线裁剪的方法。通过自定义的裁剪框，用户可以选择并调整图片，以符合特定的比例要求。此功能利用了cropper.js库，能够实时预览裁剪效果，并将最终的裁剪结果转换为BASE64字符串，便于后续的文件上传和处理。

1.html

<div class="layui-form-item">
    <label class="layui-form-label">企业印章</label>
    <div class="layui-input-block">
        <input type="file" id="imgInp" style="display: none" name="sealFile">
        <input type="hidden" name="seal" />
        <input type="hidden" name="sealStream" />
        <!--<input type="hidden" name="oldSealStream" />-->
        <button type="button" id="uploadImg" class="layui-btn layui-btn-normal" style="width:118px;">选择图片</button>
        <div id="cropperBox" style="height:240px;margin-top:5px;display:none;">
            <!--裁剪部分/images/ecs-logo.png-->
            <div>
                <img src="" id="photo" style="max-width: 100% ;height:150px;" />
            </div>
            <!--预览-->
            <div>
                <div class="img-preview preview-lg"></div>
            </div>
        </div>
    </div>
</div>

2.JS代码

var initCropper = function (img, input){
    var $image = img;
    var options = {
        aspectRatio: 1, // 16/9, 4/3, 1/1, 2/3, null 裁剪比例
        preview: '.img-preview'
    };
    $image.cropper(options);
    var $inputImage = input;
    var uploadedImageURL;
    if (URL) {
        $inputImage.change(function () {  // 给input添加监听
            //$("#cropperBox").slideDown();
            var files = this.files;
            var file;
            if (!$image.data('cropper')) {
                return;
            }
            if (files && files.length) {
                file = files[0];
                if (/^image\/\w+$/.test(file.type)) {   // 判断是否是图像文件
                    if (uploadedImageURL) {   // 如果URL已存在就先释放
                        URL.revokeObjectURL(uploadedImageURL);
                    }
                    uploadedImageURL = URL.createObjectURL(file);
                    // 销毁cropper后更改src属性再重新创建cropper
                    $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                    //$image.cropper("getCroppedCanvas").toDataURL()
                    //$inputImage.val('');
                    $('#cropperBox').show();
                } else {
                    window.alert('请选择一个图像文件！');
                }
            }
        });
    } else {
        $inputImage.prop('disabled', true).addClass('disabled');
    }
};

$('#uploadImg').on('click',function(){
    $('#imgInp').click();
});

3.获取截取图片的BASE64流传到后台再转为文件

$('#photo').cropper("getCroppedCanvas").toDataURL();