本文是一位新手程序员的博客首秀，分享了使用layui_cropper实现图片裁剪功能的过程，提到在开发中遇到的困难和自我怀疑，同时记录了组件的引入和简单应用，但未能完成限制裁剪框大小的设置。
一个小白程序员第一次写博客？
写什么呢？只能说对于我这个脑子不太聪明的人来说，真的太难太难了吖
先来说一说，我当时为什么要学开发吧，其实我也不知道为什么，可能是对这个行业的不了解，也可能是当时真的没有喜欢的专业吧，后悔吗？当然 当然不后悔是假的呀，一个不太聪明的女生学这个干嘛呀？真的是！！！
我是今年六月份毕业，到今天为止，我工作了一个多月了吧，是四月六号入的职，其实啊。我没想到我能找到工作，怎么说呢，我是幸运的，又或是不幸运的，因为做了工作之后，我就再也开心不起来了。
遇到新功能代码不会自己写，遇到bug自己也不会解决，写代码非常非常慢，而且我还非常内向，不怎么喜欢问问题，问了当时听懂了，然后上手去写却又不知从何写起，hai真的好难。我想要放弃了，之后不更了，那就是因为我辞职转行了了，或者是被辞了。哈哈哈哈！没错，我对自己就是没什么信心。
先记录一个layui_cropper裁剪图片的功能吧
注：（不是特别完美呀，一个限制裁框大小没有完成好）
首先呢，需要引入组件：croppers.js(怎么放这个文件，我不会，直接复制吧)
还有一个是样式，cropper.css(这个layui官网就有，直接下载就行)
这是三个上传图片，每个上传的大小要求不同，
所以在这个原生的组件中改了一些东西，
就是给了他唯一id,用特殊样式标出来吧（不知道怎么标注）
/*!
* Cropper v3.0.0
*/
//import { log } from "util";
layui.config({
base: '/Scripts/cropper/' //layui自定义layui组件目录
}).define(['jquery','layer','cropper'],function (exports) {
var $ = layui.jquery
, layer = layui.layer;
var cropper = layui.cropper;
var obj = {
render: function(e){
var self = this,
elem = e.elem,
saveW = e.saveW,
saveH = e.saveH,
mark = e.mark,
area = e.area,
url = e.url,
done = e.done,
type = e.type,
setData = e.setData,
_id = new Date().getTime();//新加的唯一id _id相关的就是新加的
var html = "<link rel=\"stylesheet\" href=\"/Scripts/cropper/cropper.css\">\n" +
"<div class=\"layui-fluid showImgEdit\" style=\"display: none\">\n" +
" <div class=\"layui-form-item\">\n" +
" <div class=\"layui-input-inline layui-btn-container\" style=\"width: 100px;\">\n" +
" <label for=\""+_id+'2'+"\" style=\"width: 100px;margin-left:500px;margin-top:15px;color:red\" class=\"layui-btn layui-btn-primary\">\n" +
" 选择图片\n" +
" </label>\n" +
" <input class=\"layui-upload-file\" id=\""+_id+'2'+"\" type=\"file\" value=\"选择图片\" name=\"file\">\n" +
" </div>\n" +
" <div class=\"layui-form-mid layui-word-aux\"></div>\n" +
" </div>\n" +
" <div class=\"layui-row layui-col-space15\">\n" +
" <div class=\"layui-col-xs9\">\n" +
" <div class=\"readyimg\" style=\"height:450px;background-color: rgb(247, 247, 247);\">\n" +
" <img id=\"" + (_id + '1') +"\" src=\"\" class=\"readyimg\">\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"layui-col-xs3\">\n" +
" <div class=\"img-preview\" style=\"width:200px;height:200px;overflow:hidden\">\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"layui-row layui-col-space15\">\n" +
" <div class=\"layui-col-xs9\">\n" +
" <div class=\"layui-row\">\n" +
" <div class=\"layui-col-xs6\">\n" +
" <button type=\"button\" style=\"margin:0px;width:100px\" class=\"layui-btn layui-icon layui-icon-left\" cropper-event=\"rotate\" data-option=\"-15\" title=\"Rotate -90 degrees\"> 向左旋转</button>\n" +
" <button type=\"button\" style=\"width:100px\" class=\"layui-btn layui-icon layui-icon-left\" cropper-event=\"rotate\" data-option=\"15\" title=\"Rotate 90 degrees\"> 向右旋转</button>\n" +
" </div>\n" +
" <div class=\"layui-col-xs5\" style=\"text-align: center;\">\n" +
" <button type=\"button\" style=\"margin-left: -310px;width:100px\" class=\"layui-btn \" cropper-event=\"reset\" title=\"\">重置图片</button>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"layui-col-xs3\">\n" +
" <button class=\"layui-btn layui-btn-fluid\" style=\"margin-left: -280px;width:100px\" cropper-event=\"confirmSave\" type=\"button\"> 保存修改</button>\n" +
" </div>\n" +
" </div>\n" +
"\n" +
"</div>";
$('body').append('<span id="' + _id + '">' + html + '</span>');
var content = $("#" + _id +" .showImgEdit")/* $('.showImgEdit')*/
, image = $("#" + _id +" .showImgEdit .readyimg img")
, preview = $("#" + _id +" .showImgEdit .img-preview")
, file = $("#" + _id +" .showImgEdit input[name='file']")
, options = {
aspectRatio: mark, preview: preview, viewMode: 1};
let iframe_id = null;
$(elem).on('click',function () {
layer.open({
type: 1
, content: content
, area: area
, success: function (item) {
iframe_id = item.attr('id');
image.cropper(options);
//$('.readyimg').cropper('setCropBoxData', { width: 160, height: 60 });
//
}
, cancel: function (index) {
layer.close(index);
image.cropper('destroy');
}
});
});
$("#"+_id+" .layui-btn").on('click', function () {
var event = $(this).attr("cropper-event");
//监听确认保存图像
if (event === 'confirmSave') {
image.cropper("getCroppedCanvas", {
width: 160,
height: 60,
imageSmoothingEnabled: false,
imageSmoothingQuality: 'high',
}).toBlob(function(blob){
var formData=new FormData();
formData.append('file', blob, 'head.jpg');
formData.append('type', type);
$.ajax({
method:"post",
url: url, //用于文件上传的服务器端请求地址
data: formData,
dataType:'json',
processData: false,
contentType: false,
success: function (result) {
console.log(result)
if (result.result == "success") {
layer.msg("上传成功",
{ icon: 1, time: 1000 }
, function () {
parent.layer.closeAll();
})
return done(result);
}else if(result.code == -1){
layer.alert(result.msg,{icon: 2});
}
}
});
});
//监听旋转
}else if(event === 'rotate'){
var option = $(this).attr('data-option');
image.cropper('rotate', option);
//重设图片
}else if(event === 'reset'){
image.cropper('reset');
}
//文件选择
file.change(function () {
var r= new FileReader();
var f=this.files[0];
r.readAsDataURL(f);
r.onload = function (e) {
image.cropper('destroy').attr('src', this.result).cropper(options)
};
//do {
// if ($('.cropper-crop-box').length<0
//} while (true);
});
});
}
};
exports('croppers', obj);
});
这是上传图片的页面
<div id="showFile_name" style="display:none;margin-left:-150px;">
<div style="margin-left:15px;">
<p>个人签名：</p>
<div class="layui-upload" style="background-color:white;border-radius:5px">
<div class="layui-upload-list">
<img class="layui-upload-img" src="" id="fileImg" alt="" width="160" height="60">
<p id="demoText"></p>
</div>
</div>
<button type="button" class="layui-btn" id="upload" style="background-color:#3b7cd8">上传</button>
</div>
<div style="margin-left:15px">
<p>私章：</p>
<div class="layui-upload" style="background-color:white;border-radius:5px">
<div class="layui-upload-list">
<img class="layui-upload-img" id="fileImg1" alt="" width="160" height="60">
<p id="demoText1"></p>
</div>
</div>
<button type="button" class="layui-btn" id="upload1" style="background-color:#3b7cd8">上传</button>
</div>
<div style="margin-left:15px">
<p>公章：</p>
<div class="layui-upload" style="background-color:white;border-radius:5px">
<div class="layui-upload-list">
<img class="layui-upload-img" id="fileImg2" alt="" width="260" height="260">
<p id="demoText2"></p>
</div>
</div>
<button type="button" class="layui-btn" id="upload2" style="background-color:#3b7cd8">上传</button>
</div>
</div>
这是上传的ajax
$.ajax({
url: 'GetVisa',
data: { userpwd: userpwd },
dataType: 'json',
success: function (data) {
if (data.result == 'success') {
data = data.data;
$('#pwdCheck').css('display', 'none');
$('#showFile_name').css('display', 'block');
$('#fileImg').attr('src', data.username);
$('#fileImg1').attr('src', data.personvisa);
$('#fileImg2').attr('src', data.departvisa);
layui.use('upload', function () {
var upload = layui.upload;
layui.config({
base: '/Scripts/cropper/' //layui自定义layui组件目录
}).use(['upload', 'form', 'croppers'], function () {
var $ = layui.jquery
, upload = layui.upload
, form = layui.form
, croppers = layui.croppers
, layer = layui.layer;
// 创建监听函数
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function () {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
//创建一个上传组件
croppers.render({
elem: '#upload'
, url: 'EditFile?id=' + data.id//图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
, xhr: xhrOnProgress
,type:'username'
, width: 160 //保存宽度
, height: 60
, mark: 8 / 3 //选取比例
, area: ['850px', '70%'] //弹窗宽度
, accept: 'file' //普通文件
, exts: 'jpg|jpeg|png|JPG|JPEG|PNG'//只允许上传图片
, done: function (result) { //上传完毕回调
$('#fileImg').attr('src', result.src); //成功返回路径存到数据库
}
});
croppers.render({
elem: '#upload1'
, url: 'EditFile?id=' + data.id //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
, width: 160 //保存宽度
, height: 60
, type: 'personvisa'
, mark: 8 / 3 //选取比例
, area: ['850px', '70%'] //弹窗宽度
, accept: 'file' //普通文件
, exts: 'jpg|jpeg|png|JPG|JPEG|PNG'//只允许上传图片
, done: function (result) { //上传完毕回调
$('#fileImg1').attr('src', result.src); //成功返回路径存到数据库
}
});
croppers.render({
elem: '#upload2'
, url: 'EditFile?id=' + data.id //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
, width: 260 //保存宽度
, height: 260
, type: 'departvisa'
, mark: 1 / 1 //选取比例
, area: ['850px', '70%'] //弹窗宽度
, accept: 'file' //普通文件
, exts: 'jpg|jpeg|png|JPG|JPEG|PNG'//只允许上传图片
, done: function (result) { //上传完毕回调
$('#fileImg2').attr('src', result.src); //成功返回路径存到数据库
}
, error: function () {
//演示失败状态，并实现重传
var demoText = $('#demoText2');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
});
})
}
else {
alert(data.data);
}
}
});
就这些，没有了，要是想要限制裁剪按框的大小，需要再cropper.js组件中设置，因为现在还没有解决，先不写了！以后成功了再补充。组件就是下面的，好长，前面的属性作用在网上可以查到
/*!
* Cropper v3.0.0
*/
layui.define(['jquery'], function (exports) {
var $ = layui.jquery;
$ = $ && $.hasOwnProperty('default') ? $['default'] : $;
var DEFAULTS = {
// Define the view mode of the cropper
viewMode: 0, // 0, 1, 2, 3
// Define the dragging mode of the cropper
dragMode: 'crop', // 'crop', 'move' or 'none'
// Define the aspect ratio of the crop box
aspectRatio: NaN,
// An object with the previous cropping result data
data: null,
// A selector for adding extra containers to preview
preview: '',
// Re-render the cropper when resize the window
responsive: true,
// Restore the cropped area after resize the window
restore: true,
// Check if the current image is a cross-origin image
checkCrossOrigin: true,
// Check the current image's Exif Orientation information
checkOrientation: true,
// Show the black modal
modal: true,
// Show the dashed lines for guiding
guides: true,
// Show the center indicator for guiding
center: true,
// Show the white modal to highlight the crop box
highlight: true,
// Show the grid background
background: true,
// Enable to crop the image automatically when initialize
autoCrop: true,
// Define the percentage of automatic cropping area when initializes
autoCropArea: 0.8,
// Enable to move the image
movable: true,
// Enable to rotate the image
rotatable: true,
// Enable to scale the image
scalable: true,
// Enable to zoom the image
zoomable: true,
// Enable to zoom the image by dragging touch
zoomOnTouch: true,
// Enable to zoom the image by wheeling mouse
zoomOnWheel: true,
// Define zoom ratio when zoom the image by wheeling mouse
wheelZoomRatio: 0.1,
// Enable to move the crop box
cropBoxMovable: true,
// Enable to resize the crop box
cropBoxResizable: true,
// Toggle drag mode between "crop" and "move" when click twice on the cropper
toggleDragModeOnDblclick: true,
// Size limitation
minCanvasWidth: 0,
minCanvasHeight: 0,
minCropBoxWidth: 0,
minCropBoxHeight: 0,
minContainerWidth: 200,
minContainerHeight: 100,
// Shortcuts of events
ready: null,
cropstart: null,
cropmove: null,
cropend: null,
crop: null,
zoom: null
};
var TEMPLATE = '<div class="cropper-container">' + '<div class="cropper-wrap-box">' + '<div class="cropper-canvas"></div>' + '</div>' + '<div class="cropper-drag-box"></div>' + '<div class="cropper-crop-box">' + '<span class="cropper-view-box"></span>' + '<span class="cropper-dashed dashed-h"></span>' + '<span class="cropper-dashed dashed-v"></span>' + '<span class="cropper-center"></span>' + '<span class="cropper-face"></span>' + '<span class="cropper-line line-e" data-action="e"></span>' + '<span class="cropper-line line-n" data-action="n"></span>' + '<span class="cropper-line line-w" data-action="w"></span>' + '<span class="cropper-line line-s" data-action="s"></span>' + '<span class="cropper-point point-e" data-action="e"></span>' + '<span class="cropper-point point-n" data-action="n"></span>' + '<span class="cropper-point point-w" data-action="w"></span>' + '<span class="cropper-point point-s" data-action="s"></span>' + '<span class="cropper-point point-ne" data-action="ne"></span>' + '<span class="cropper-point point-nw" data-action="nw"></span>' + '<span class="cropper-point point-sw" data-action="sw"></span>' + '<span class="cropper-point point-se" data-action="se"></span>' + '</div>' + '</div>';
var REGEXP_DATA_URL_HEAD = /^data:.*,/;
var REGEXP_USERAGENT = /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i;
var navigator = typeof window !== 'undefined' ? window.navigator : null;
var IS_SAFARI_OR_UIWEBVIEW = navigator && REGEXP_USERAGENT.test(navigator.userAgent);
var fromCharCode = String.fromCharCode;
function isNumber(n) {
return typeof n === 'number' && !isNaN(n);
}
function isUndefined(n) {
return typeof n === 'undefined';
}
function toArray(obj, offset) {
var args = [];
// This is necessary for IE8
if (isNumber(offset)) {
args.push(offs
最低0.47元/天 解锁文章
扫一扫
3494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
