cropper-css

其实裁剪最本质的原理：通过工具获取到图片（不是JS那种获取DOM的方式，比如flash获取到图片，对图片任意操作，canvas也是一样，将图片放在画布上，任意操作）

由于前端页面使用的是layui这个框架，所有使用cropper时，最好的能够将cropper这个包作为一个layui的扩展嵌入到layui中，这样都省事，嵌入很简单，具体可以参考下面我封装好的代码

var cas=imageEle.cropper('getCroppedCanvas'); var base64url=cas.toDataURL('image/jpeg'); console.log(base64url); //生成base64图片的格式 // 展示裁剪的图片的两种方式 // 方式一 $('.cavans').html(cas) //在body显示出canvas元素 // 方式二 $('.canvans').attr("src", base64url);

封装好的cropper源码如下，包括cropper-jQuery的

// 图片上传成功回调函数 function cropperCallback(response, index) { if (response) { var inputEle = document.getElementById("imgInput"); if (index === "None") { // 添加图片的回调 var trEle = document.createElement("tr"); var addImageIndex = totalArray.length; trEle.innerHTML = '<td><img src="' + response[0].fp_show + '" alt=https://www.ym97.com/wenku/cssm""></td><td><span style="color: #5FB878;">添加成功</span></td><td>' + '<button type="button" class="layui-btn layui-btn-sm edit-btn" id="edit_' + addImageIndex + '">修改</button>' + '<button type="button" class="layui-btn layui-btn-sm delete-btn" id="delete_' + addImageIndex + '">删除</button></td>'; document.getElementById("imgList").appendChild(trEle); totalArray.push(response[0].fp_relative); } else { // 修改图片的回调 var thisTrChild = document.getElementById("edit_" + index).parentElement.parentElement.children; thisTrChild[0].innerHTML = '<img src="' + response[0].fp_show + '" alt=https://www.ym97.com/wenku/cssm"">'; thisTrChild[1].innerHTML = '<span style="color: #5FB878;">修改成功</span>'; totalArray[parseInt(index)] = response[0].fp_relative; } inputEle.value = totalArray.join(","); } }

更多layui知识请关注layui使用教程栏目。
/*! * jQuery Cropper v1.0.0 * https://github.com/fengyuanchen/jquery-cropper * * Copyright (c) 2018 Chen Fengyuan * Released under the MIT license * * Date: 2018-04-01T06:20:13.168Z */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery'), require('cropperjs')) : typeof define === 'function' && define.amd ? define(['jquery', 'cropperjs'], factory) : global.layui && layui.define ? layui.define(['jquery', 'cropper'], function (exports) { exports('jqcropper', factory(layui.jquery, layui.cropper)) }) : (factory(global.jQuery, global.Cropper)); }(this, (function ($, Cropper) { 'use strict'; $ = $ && $.hasOwnProperty('default') ? $['default'] : $; Cropper = Cropper && Cropper.hasOwnProperty('default') ? Cropper['default'] : Cropper; if ($.fn) { var AnotherCropper = $.fn.cropper; var NAMESPACE = 'cropper'; $.fn.cropper = function jQueryCropper(option) { for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { args[_key - 1] = arguments[_key]; } var result = void 0; this.each(function (i, element) { var $element = $(element); var isDestroy = option === 'destroy'; var cropper = $element.data(NAMESPACE); if (!cropper) { if (isDestroy) { return; } var options = $.extend({}, $element.data(), $.isPlainObject(option) && option); cropper = new Cropper(element, options); $element.data(NAMESPACE, cropper); } if (typeof option === 'string') { var fn = cropper[option]; if ($.isFunction(fn)) { result = fn.apply(cropper, args); if (result === cropper) { result = undefined; } if (isDestroy) { $element.removeData(NAMESPACE); } } } }); return result !== undefined ? result : this; }; $.fn.cropper.Constructor = Cropper; $.fn.cropper.setDefaults = Cropper.setDefaults; $.fn.cropper.noConflict = function noConflict() { $.fn.cropper = AnotherCropper; return this; }; } }))); cropper-jquery

实现图片裁剪的代码

出处：https://www.cnblogs.com/zhaopanpan/

以上就是基于layui+cropper.js实现上传图片的裁剪功能的方法的详细内容，更多请关注聚合云库其它相关文章！

/*! * Cropper.js v1.4.3 * https://fengyuanchen.github.io/cropperjs * * Copyright 2015-present Chen Fengyuan * Released under the MIT license * * Date: 2018-10-24T13:07:11.429Z */ .cropper-container { direction: ltr; font-size: 0; line-height: 0; position: relative; -ms-touch-action: none; touch-action: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cropper-container img { display: block; height: 100%; image-orientation: 0deg; max-height: none !important; max-width: none !important; min-height: 0 !important; min-width: 0 !important; width: 100%; } .cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop-box, .cropper-modal { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .cropper-wrap-box, .cropper-canvas { overflow: hidden; } .cropper-drag-box { background-color: #fff; opacity: 0; } .cropper-modal { background-color: #000; opacity: .5; } .cropper-view-box { display: block; height: 100%; outline-color: rgba(51, 153, 255, 0.75); outline: 1px solid #39f; overflow: hidden; width: 100%; } .cropper-dashed { border: 0 dashed #eee; display: block; opacity: .5; position: absolute; } .cropper-dashed.dashed-h { border-bottom-width: 1px; border-top-width: 1px; height: calc(100% / 3); left: 0; top: calc(100% / 3); width: 100%; } .cropper-dashed.dashed-v { border-left-width: 1px; border-right-width: 1px; height: 100%; left: calc(100% / 3); top: 0; width: calc(100% / 3); } .cropper-center { display: block; height: 0; left: 50%; opacity: .75; position: absolute; top: 50%; width: 0; } .cropper-center:before, .cropper-center:after { background-color: #eee; content: ' '; display: block; position: absolute; } .cropper-center:before { height: 1px; left: -3px; top: 0; width: 7px; } .cropper-center:after { height: 7px; left: 0; top: -3px; width: 1px; } .cropper-face, .cropper-line, .cropper-point { display: block; height: 100%; opacity: .1; position: absolute; width: 100%; } .cropper-face { background-color: #fff; left: 0; top: 0; } .cropper-line { background-color: #39f; } .cropper-line.line-e { cursor: ew-resize; right: -3px; top: 0; width: 5px; } .cropper-line.line-n { cursor: ns-resize; height: 5px; left: 0; top: -3px; } .cropper-line.line-w { cursor: ew-resize; left: -3px; top: 0; width: 5px; } .cropper-line.line-s { bottom: -3px; cursor: ns-resize; height: 5px; left: 0; } .cropper-point { background-color: #39f; height: 5px; opacity: .75; width: 5px; } .cropper-point.point-e { cursor: ew-resize; margin-top: -3px; right: -3px; top: 50%; } .cropper-point.point-n { cursor: ns-resize; left: 50%; margin-left: -3px; top: -3px; } .cropper-point.point-w { cursor: ew-resize; left: -3px; margin-top: -3px; top: 50%; } .cropper-point.point-s { bottom: -3px; cursor: s-resize; left: 50%; margin-left: -3px; } .cropper-point.point-ne { cursor: nesw-resize; right: -3px; top: -3px; } .cropper-point.point-nw { cursor: nwse-resize; left: -3px; top: -3px; } .cropper-point.point-sw { bottom: -3px; cursor: nesw-resize; left: -3px; } .cropper-point.point-se { bottom: -3px; cursor: nwse-resize; height: 20px; opacity: 1; right: -3px; width: 20px; } @media (min-width: 768px) { .cropper-point.point-se { height: 15px; width: 15px; } } @media (min-width: 992px) { .cropper-point.point-se { height: 10px; width: 10px; } } @media (min-width: 1200px) { .cropper-point.point-se { height: 5px; opacity: .75; width: 5px; } } .cropper-point.point-se:before { background-color: #39f; bottom: -50%; content: ' '; display: block; height: 200%; opacity: 0; position: absolute; right: -50%; width: 200%; } .cropper-invisible { opacity: 0; } .cropper-bg { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC'); } .cropper-hide { display: block; height: 0; position: absolute; width: 0; } .cropper-hidden { display: none !important; } .cropper-move { cursor: move; } .cropper-crop { cursor: crosshair; } .cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point { cursor: not-allowed; } cropper-css

cropper-js

cropper修改上传图片的格式：