项目中运用cropper插件

在项目中简单的用了cropper插件，记录一下。

github地址： https://github.com/fengyuanchen/cropper

demo演示： https://fengyuanchen.github.io/cropper/

中文API文档：

网上搜到的这一篇，还比较详细。

http://blog.csdn.net/fxss5201/article/details/52764126

项目中需求：

在dialog中实现图片的裁剪（裁剪的比例由外界传入，在裁剪过程中比例固定）

将demo中的index.html代码复制到dialog页面，根据自己的需求进行布局。

导入css:

<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/cropper.min.css">
<link rel="stylesheet" href="css/main.css">

导入js:

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/cropper.min.js"></script>
<script src="js/main.js"></script>

初始化cropper的js代码：

var width //页面传过来的宽
var height  //页面传过来的高
//cropper初始化
var $dataX = $('#dataX'),
var $dataY = $('#dataY'),
var $dataHeight = $('#dataHeight'),
var $dataWidth = $('#dataWidth'),
var $dataRotate = $('#dataRotate'),
var options ={aspectRatio:width/height,preview:'.img-preview',crop:function(e){
$dataX.val(Math.round(data.x));$dataY.val(Math.round(data.y));$dataHeight.val(Math.round(data.height));$dataWidth.val(Math.round(data.width));$dataRotate.val(Math.round(data.rotate));
}
}
$('#image').cropper(options);

用js或者${}设置外部传入src的值（需要裁减图片的路径），在dialog进入时显示。

<div class="img-container"><img id="image" src="img/picture.jpg" alt="Picture">
</div>

当在页面点击getCroppedCanvas按钮时，会弹出getCroppedCanvasModal弹窗，来进行下载操作。

而我们现行需要进行上传到服务器，所以添加一个上传按钮，将下载按钮注掉。

<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4></div><div class="modal-body"></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a class="btn btn-primary" id="uploadPic">确认上传</a><a class="btn btn-primary hidden" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a></div></div></div>
</div><!-- /.modal -->

在js中上传图片base64：

$("#uploadPic").on('click',function(){
//设置canvas的id$("canvas").attr("id","myCanvas");
var Pic=document.getElenmentById("myCanvas").toDataURL("image/png");
Pic=Pic.replace(/^data:image\/(png|jpg);base64,/,"");
//下面可以Ajax将Pic传入后台进行base64保存图片的操作。。。})

Controller接受后在后台将base64数据转换为图片保存

//base64字符串转化成图片  public static boolean GenerateImage(String imgStr，String imgFilePath)  {   //对字节数组字符串进行Base64解码并生成图片  if (imgStr == null) //图像数据为空  return false;  BASE64Decoder decoder = new BASE64Decoder();  try   {  //Base64解码  byte[] b = decoder.decodeBuffer(imgStr);  for(int i=0;i<b.length;++i)  {  if(b[i]<0)  {//调整异常数据  b[i]+=256;  }  }  //生成jpeg图片OutputStream out = new FileOutputStream(imgFilePath);      out.write(b);  out.flush();  out.close();  return true;  }   catch (Exception e)   {  return false;  }  }

项目中运用cropper插件相关推荐

实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue导入swiper_vue项目中导入swiper插件的方法
这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 版本选择 swiper是个常用 ...
在项目中配置PageHelper插件时遇到类型转换异常
在项目中配置PageHelper插件时遇到类型转换异常参考文章: (1)在项目中配置PageHelper插件时遇到类型转换异常 (2)https://www.cnblogs.com/dubhlinn ...
在 Vite项目中，使用插件 @rollup/plugin-inject 注入全局 jQuery
在 Vite项目中,使用插件 @rollup/plugin-inject 注入全局 jQuery 环境写在前面方法一.全局静态引入方法二.使用插件 @rollup/plugin-inject 注 ...
MVC web项目中引入jquery插件
MVC web项目中引入jquery插件 1.下载jquery [https://jquery.com/] 看到这样的文档,直接CTRL+S保存到自己的文件夹 2.将文件夹中的js文件直接拖拽导入到项 ...
【Flutter】Flutter 项目中使用 Flutter 插件 ( Flutter 插件管理平台 | 搜索 Flutter 插件 | 安装 Flutter 插件 | 使用 Flutter 插件 )
文章目录一.Flutter 包和插件管理平台二.Flutter 插件搜索示例三.Flutter 插件装示例 1.添加 Dart 包依赖 2.获取 Dart 包 3.使用 Dart 包 4.官方的 ...
vue项目中使用粒子插件
效果如下: 1.安装依赖: npm install vue-particles --save-dev 2.main.js引入 import VueParticles from 'vue-particl ...
vue项目中使用iview插件中this.$Modal.confirm的使用方法
当我们项目中需要根据id或者其他删除一个选项时,我们会首先弹出确认删除对话框,询问用户是否删除,iview中confirm的用法与elment-ui不同,官方链接:https://www.iviewu ...
cordova 更改app版本_ionic项目中使用cordova-hot-code-push插件
例子源码参见我的github:zhangzhaojun/chcp-manual-demo 使用cordova-hot-code-push插件的方法如下: 1.如下命令创建一个项目: $ ionic s ...

项目中运用cropper插件

项目中运用cropper插件相关推荐

最新文章

热门文章