基于layui+cropper.js实现上传图片的裁剪功能的方法

基于layui+cropper.js实现上传图片的裁剪功能的方法eer码友部落

cropper-csseer码友部落

其实裁剪最本质的原理:通过工具获取到图片(不是JS那种获取DOM的方式,比如flash获取到图片,对图片任意操作,canvas也是一样,将图片放在画布上,任意操作)eer码友部落

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

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的eer码友部落

// 图片上传成功回调函数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

实现图片裁剪的代码eer码友部落

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

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

/*! * 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-jseer码友部落

cropper修改上传图片的格式:eer码友部落

eer码友部落