cropper+jq（图片裁剪上传）

编程入门行业动态更新时间:2024-10-23 13:26:20

cropper+jq（图片裁剪<a href=https://www.elefans.com/category/jswz/34/1771255.html style= 上传）"/>

cropper+jq（图片裁剪上传）

  <link rel="stylesheet" href="../../cropper/cropper.css"> <script type="text/javascript" src="../../cropper/cropper.js"></script>

没有引入jquery的原因

引入jquery

  <script src="../jquery-1.10.2.js"></script>

这里使用的是3.1.5版本


<!-- 用一个块元素(容器)包装图像或画布元素 -->
<div class="box"><img id="image" src="../img/act.png">
</div>

 $('#image').cropper({aspectRatio: 1 / 1,viewMode: 1,crop: function (e) {console.log(e);}});

示例

父页面

 <!-- logo --><div class="layui-row" style="margin-bottom: 8px;"><div class="layui-col-md12"><div class="layui-form-item"><label class="layui-form-label">logo：</label><div class="upload_reveal">上传图片<input type="file" class="upload_file" id="coverImage" name="coverImage" /></div></div><div class="layui-form-item" id="coverImageContent" style="padding-top: 10px"></div></div></div>

  // logo--图片回调function setImg (url) {coverImageUrl = url;var html = '<div class="" style="position:relative;margin-left:110px;"><a href="' + url + '" target="_blank "  title="点击查看">' +'<img  src="' + url + '"  height="135px" width="135px" style="margin-bottom: 8px;"></a><div class="delImg">删除</div></div>';$("#coverImageContent").html(html);}// 删除图片$('#coverImageContent').on('click', '.delImg', function (event) {event.stopPropagation();//阻止事件冒泡var that = $(this);layer.confirm('确定删除图片吗？', function (index) {// 最后去删除元素，否则找不到var delItem = that.parent();delItem.remove();layer.close(index);layer.msg('删除成功')coverImageUrl = "";});})var coverImage = document.getElementById('coverImage');coverImage.onchange = function () {var fileData = this.files[0];//这是我们上传的文件console.log('这是我们上传的文件fileData', this.files, fileData);console.log('ocument.getElementById("coverImage").value', document.getElementById("coverImage").value);var aa = document.getElementById("coverImage").value.toLowerCase().split('.'); //以“.”分隔上传文件字符串// var aa=document.form1.userfile.value.toLowerCase().split('.');//以“.”分隔上传文件字符串if (document.getElementById("coverImage").value == "") {layer.msg('图片不能为空！');return;} else {if (aa[aa.length - 1] == 'gif' || aa[aa.length - 1] == 'jpg' || aa[aa.length - 1] == 'bmp'||aa[aa.length - 1] == 'png' || aa[aa.length - 1] == 'jpeg') //判断图片格式{var imagSize = document.getElementById("coverImage").files[0].size;if (imagSize < 1024 * 1024 * 3) {console.log('fileData', fileData); //读取上传文件let reader = new FileReader();//readAsDataURL方法可以将File对象转化为data:URL格式的字符串（base64编码）reader.readAsDataURL(fileData);reader.onload = (e) => {let dataURL = reader.result;console.log('dataURL', dataURL);window.sessionStorage.setItem('coverImage', dataURL); layer.open({title: '编辑图片',type: 2,scrollbar: true,area: ['60%','80%'],content: './imgEdit.html?fileName=' + fileData.name,// content: './imgEdit.html',end: function () { } });} } else {layer.msg("图片大小不能超过3M！");}} else {layer.msg('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片'); //jpg和jpeg格式是一样的只是系统Windows认jpg，Mac OS认jpeg，}}}

弹窗页面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>编辑图片</title><link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css"><link rel="stylesheet" href="../../layuiadmin/style/admin.css"><link rel="stylesheet" href="../open.css"><link rel="stylesheet" href="../../cropper/cropper.css"><style>#coverImageContent {width: 500px;height: auto;}#cropImg {width: 500px;height: 500px;}.previewBox {/* box-shadow: 0 0 5px #adadad; */width: 200px;height: 200px;margin-top: 30px;overflow: hidden;/*这个超出设置为隐藏很重要，否则就会整个显示出来了*/}.previewImg {width: 200px;height: 200px;}</style>
</head><body><div class="layui-fluid"><div class="layui-row layui-col-space15"><div class="layui-col-md12"><form class="layui-form layui-form-pane" action=""><!-- logo --><div class="layui-row"><div class="layui-col-md6"><div class="layui-form-item" id="coverImageContent" style="padding-top: 10px"><img src="" alt="" id="cropImg"></div></div><div class="layui-col-md6"style="display: flex;flex-direction: column;justify-content: center;align-items: center;"><div class="title" style="margin-bottom: 50px;margin-top: 10px;font-size: 18px;">裁剪预览</div><!-- 3.两个用于预览的div  --><div class="previewBox"></div></div></div><div class="layui-row modal_footer"><button type="button" class="layui-btn layui-btn-normal" id="submit">确认提交</button><button type="button" class="layui-btn layui-btn-primary" id="closeLayer">取消</button></div></form></div></div></div><script src="../../layuiadmin/layui/layui.all.js"></script><script src="../utils.js"></script><script src="../jquery-1.10.2.js"></script><script type="text/javascript" src="../../cropper/cropper.js"></script><script>closeLayer();// 关闭当前弹窗// var val = GetQueryString("val");var fileName = decodeURI(GetQueryString("fileName"));// var fileName = JSON.parse(window.sessionStorage.getItem('fileData')).name;var val = window.sessionStorage.getItem('coverImage');document.querySelector('#cropImg').src = val;$('#cropImg').cropper({aspectRatio: 1 / 1,viewMode: 1,// modal: false,//黑色模态minContainerWidth: 500,   //容器最小的宽度minContainerHeight: 500,  //容器最小的高度dragMode: 'move',         //设置裁剪框为可以移动preview: [document.querySelector('.previewBox')],//预览crop: function (e) {// console.log(e);}});$("#submit").on("click", function () {// console.log($('#cropImg').cropper('getCroppedCanvas'));var cas = $('#cropImg').cropper('getCroppedCanvas', {width: 160,height: 90,minWidth: 256,minHeight: 256,maxWidth: 4096,maxHeight: 4096,fillColor: '#fff',imageSmoothingEnabled: false,imageSmoothingQuality: 'high',});//  上传cas.toBlob(function (blob) {console.log('生成Blob的图片格式', blob);  //生成Blob的图片格式// 裁剪后的 blob 地址console.log(URL.createObjectURL(blob));var formData = new FormData()var fileOfBlob = new File([blob], fileName);// console.log('fileOfBlob', fileOfBlob);formData.append("file", fileOfBlob);// console.log('formData', formData);var loadIcon1 = layer.load(2);$.ajax({url: contextPath + '/AliOssUpload',type: "POST",data: formData,cache: false,processData: false,contentType: false,//避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件success: function (res) {layer.close(loadIcon1);if (res.rt == 0) {let url = res.datacoverImageUrl = url;let a = parent.setImg(url);//注意这里调用父层的JS 实现传值var index = parent.layer.getFrameIndex(window.name);//获取当前层parent.layer.close(index);//关闭当前层return false;} else if (res.rt == -1) {//错误信息layer.open({title: '错误信息',icon: 2,content: res.msg});}}});})})</script>
</body></html>