cropper.js 超级好用的裁剪图片工具
最近要做一个照片裁剪功能。就选用了cropper.js
代码如下:贴出来
<div class="container">
<div class="row">
<div class="col col-6">
<img id="image" src="${dcutpic }" alt="Picture">
</div>
<div class="col col-4">
<div class="preview"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
// $('#image').cropper('setData',{width:'400px',
// height:'300px'});
var $previews = $('.preview');
$('#image').cropper({
//preview: ".preview",
//
ready: function (e) {
$(this).cropper('reset');
var $clone = $(this).clone().removeClass('cropper-hidden');
console.log($clone);
$clone.css({
display: 'block',
width: '100%',
minWidth: 0,
minHeight: 0,
maxWidth: 'none',
maxHeight: 'none'
});
$previews.css({
width: '263'
}).html($clone);
var previewWidth = $previews.width();
console.log(previewWidth);
},
crop: function (e) {
var imageData = $(this).cropper('getImageData');
console.log(2354);
console.log(imageData);
var previewAspectRatio = e.width / e.height;
console.log(previewAspectRatio);
var previewWidth = $previews.width();
console.log(previewWidth);
var previewHeight = previewWidth / previewAspectRatio;
var imageScaledRatio = e.width / previewWidth;
$previews.height(previewHeight).find('img').css({
width: imageData.naturalWidth / imageScaledRatio,
height: imageData.naturalHeight / imageScaledRatio,
marginLeft: -e.x / imageScaledRatio,
marginTop: -e.y / imageScaledRatio
});
canvas=$('#image').cropper('getCroppedCanvas',{fillColor: '#fff',
imageSmoothingEnabled: false,
imageSmoothingQuality: 'high'});
console.log(canvas);
console.log(convertCanvasToImage(canvas));
},
minContainerWidth:400
});
$('#image').cropper('scale', 1);
});
//canvas转换图片
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
最后一步是直接将转化后的图片插入到div里面
$('#carPhoto').empty().append(convertCanvasToImage(canvas));
至此就结束了。
cropper.js 超级好用的裁剪图片工具的更多相关文章
- 基于cropper.js的图片上传和裁剪
项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...
- cropper.js 二次开发:截图并下载图片
cropper.js 是一个基于jquery的图片截取库. 参考:https://blog.csdn.net/weixin_38023551/article/details/78792400 我的代码 ...
- Vue中使用Cropper.js裁剪图片
Cropper.js是一款很好用的图片裁剪工具,可以对图片的尺寸.宽高比进行裁剪,满足诸如裁剪头像上传.商品图片编辑之类的需求. github: https://github.com/fengyuan ...
- 图片裁剪 cropper.js 上传组件封装 vue
//HTML cropper.js 文档地址: https://github.com/fengyuanchen/cropperjs/blob/master/README.md <template ...
- cropper.js图片裁剪
最近做电子名片的项目,可是个人照片展示上出现了 用户上传的图片尺寸严重失调,所以要求进行图片裁剪,再此我对图片裁剪进行调研 还不太成熟 以后再改 这个实现的原理是 前台获取到 坐标 图片的尺寸 原图文 ...
- cropper.js裁剪图片的使用
这两天难得有时间可以整理一下最近学习的东西,这两天项目中用到了头像上传裁剪的功能,这里只介绍头像的裁剪吧. 单独实现图片剪裁的功能还是挺容易的,入门级别的.看一遍官方给的文档,基本上就明白了.大家如果 ...
- cropper(裁剪图片)插件使用(案例)
公司发布微信H5前端阵子刚刚弄好的H5端的图片上传插件,现在有需要裁剪图片.前端找了一个插件---cropper 本人对这插件不怎么熟悉,这个案例最好用在一个页面只有一个上传图片的功能上而且只适合单个 ...
- cropper实现基本的裁剪图片并上传
使用cropper之前需要先引用 cropper.css 和 cropper.js cropper 官网:https://fengyuanchen.github.io/cropper/ cropper ...
- vue 裁剪图片,插件Cropper的使用
全局安装 npm install cropperjs 如果想本项目安装,方便移植: import Cropper from 'cropperjs' --save 这样的话,本地 p ...
随机推荐
- 【转】Autofac高级用法之动态代理
原文:http://www.cnblogs.com/stulzq/p/8547839.html 前言 Autofac的DynamicProxy来自老牌的Castle项目.DynamicProxy(以下 ...
- UEditor富文本web编辑器
UEditor是由百度web前端研发部开发所见即所得,前几天把公司原来的富文本编辑器换成百度的了,可以把秀米制作的样式 整个复制到文本编辑器中,原汁原味... 到官网看了文档,其实很简单,就简单的配置 ...
- PostgreSQL处理xml数据初步
磨砺技术珠矶,践行数据之道,追求卓越价值回到上一级页面:PostgreSQL基础知识与基本操作索引页 回到顶级页面:PostgreSQL索引页[作者 高健@博客园 luckyjackgao@g ...
- Codeforces 912 E.Prime Gift (折半枚举、二分)
题目链接:Prime Gift 题意: 给出了n(1<=n<=16)个互不相同的质数pi(2<=pi<=100),现在要求第k大个约数全在所给质数集的数.(保证这个数不超过1e ...
- spring 各个版本的源码、jar包和源码jar包下载地址
spring各个版本的源码jar包.文档jar包和spring的jar包 http://maven.springframework.org/release/org/springframework/sp ...
- html元素可以同时实现两个class的功能
html元素标签可以放置两个不同的class文件并分别实现效果
- Java并发工具类(三):控制并发线程数的Semaphore
作用 Semaphore(信号量)是用来控制同时访问特定资源的线程数量,它通过协调各个线程,以保证合理的使用公共资源. 简介 Semaphore也是一个线程同步的辅助类,可以维护当前访问自身的线程个数 ...
- FileDialog对象
返回表示文件对话框实例的 FileDialog 对象. 语法 expression. FileDialog( _fileDialogType_ ) expression:表示 Application ...
- 并发系列(三)-----volatile
一 简介 volatile关键字是轻量级的synchronized,volatile在并发编程中保证共享变量的可见性,当一个线程修改被volatile修饰的共享变量时,另外一个线程就能读到这个修改的值 ...
- CentOS搭建Docker Hub私有仓库
docker pull registry拉取registry镜像 docker images查看镜像 docker run -d -p 5000:5000 -v /opt/data/registry: ...