本文主要是介绍jquery插件cropper使用笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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();
这篇关于jquery插件cropper使用笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
