剪裁正方形图片cropper
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>裁剪图片</title>
<link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
<!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
<style>
.cropper-view-box{
border-radius: 50%;
}
#photo {
max-width: 100%;
}
.img-preview {
width: 100px;
height: 100px;
overflow: hidden;border-radius: 50%;
}
button {
margin-top:10px;
}
#result {
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<label for="input" class="btn btn-danger" id="">
<span>选择图片</span>
<input type="file" id="input" class="sr-only">
</label>
</div>
</div>
<div class="">
<div class="" style="width:50%">
<img src="" id="photo" >
</div>
<div class="">
<div>
<p>
预览(100*100)：
</p>
<div class="img-preview">
</div>
</div>
<button class="" onclick="crop()">裁剪图片</button>
<div>
<br/>
<p>
结果：
</p>
<img src="" alt="裁剪结果" id="result">
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
<!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<script>
// 修改自官方demo的js
var initCropper = function (img, input){
var $image = img;
var options = {
aspectRatio: 1, // 纵横比
viewMode: 2,
preview: '.img-preview' // 预览图的class名
};
$image.cropper(options);
var $inputImage = input;
var uploadedImageURL;
if (URL) {
// 给input添加监听
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
// 判断是否是图像文件
if (/^image\/\w+$/.test(file.type)) {
// 如果URL已存在就先释放
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
}
uploadedImageURL = URL.createObjectURL(file);
// 销毁cropper后更改src属性再重新创建cropper
$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
$inputImage.val('');
} else {
window.alert('请选择一个图像文件！');
}
}
});
} else {
$inputImage.prop('disabled', true).addClass('disabled');
}
}
var crop = function(){
var $image = $('#photo');
var $target = $('#result');
$image.cropper('getCroppedCanvas',{
width:300, // 裁剪后的长宽
height:300
}).toBlob(function(blob){
// 裁剪后将图片放到指定标签
$target.attr('src', URL.createObjectURL(blob));
});
}
$(function(){
initCropper($('#photo'),$('#input'));
});
</script>
</body>
</html>
剪裁正方形图片cropper的更多相关文章
- c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合，找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理（完全指北）
c#封装DBHelper类 public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...
- 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
转载 原文:http://www.divcss5.com/wenji/w732.shtml 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形. 二.使用布局技术 - ...
- UIImage非正方形图片如何剪切为正方形
有时候项目里做头像上传时候,必须要把用户从相册或是相机里的选择的图片剪切为指定大小的图片,遇到太大,太小或是太长的图片就需coregraphic来对图片进行剪切 废话不多说,直接上代码 /** * 剪 ...
- .net webapi 接收保存图片到服务器，并居中剪裁压缩图片
原文链接:https:////www.cnblogs.com/Jackyye/p/12510943.html 每天解决一些c#小问题,在写微信小程序,或者一些手机软件接口,我们经常要用到上传图片到服务 ...
- php网页显示正方形图片缩略图
需求是这样的:原始图片的大小是不定的,类似800*600.1000*756,现有一个页面要以正方形(60*60)显示这些图片,注意:图片只能在内存处理,不能缩小后保存到本地磁盘. 解决办法: html ...
- c# 制作正方形图片
using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D ...
- caffe中使用crop_size剪裁训练图片
layer { name: "data" type: "Data" top: "data" top: "label" i ...
- C#图片处理3种高级应用（高缩略图清晰度、图片剪裁、图片水印）
利用C#图片处理的一些基本和高级应用,解决了显示排版时想让相片缩略图列表非常统一.整齐.和美观,每张缩略图大小固定为120 x 90且不拉伸变形,用户头像让缩略图比原图更清晰,上传的图片下加一个半透明 ...
- Photoshop制作Android UI:怎样从大图片中准确剪切出圆角正方形 图片
如题所看到的,最初我是直接用PS的剪切工具,但发现有时不太好用. 由于你必须提前设好要剪切的尺寸. 也可能是我这小白不知道咋用. 下为摸索到的最好方法: 1.打开原图.新建图层,假设是png图片就不用 ...
- PS 多次剪裁同一图片
一个图品里面有两个小图,要分别抠出来. 我以前的做法是,先扣一个,重新打开文件,再扣另外一个. 今天发现一个简单的办法,不用重新打开文件. 就是在扣完第一个的时候,打开历史记录面板,双击 打开 动作, ...
随机推荐
- go语言 cmd执行命令,遇到空格或者双引号无法执行成功的解决方案
大部分go执行cmd命令都是,我也是这样写的 package main import ( "fmt" "os/exec" ) func main() { cmd ...
- DotNetCore2.1镜像上传DockerHub在Docker运行
操作步骤: 1.本地安装Docker(此处省略安装过程) 2.登录Docker 3.浏览器打开官方DockerHub地址注册用户(注意:注册操作需要FQ才能成功,后期登录和其他操作使用国内网络都可以) ...
- Linux 下查看mysql 加载的配置文件， 并且解决报错 “this is incompatible with sql_mode=only_full_group_by”
# 查看命令地址 which mysql /usr/local/mysql/bin/mysql # 查看配置文件地址 /usr/local/mysql/bin/mysql --verbose --he ...
- vue3项目一些小坑
文章来自 https://mp.weixin.qq.com/s/nJsfOUNNKYQdvB9o9BXVVQ 1. Vue2.x 和 Vue3.x 生命周期方法的变化 文档地址:https://v3. ...
- ROS多机通信
嵌入式开发板端: export ROS_IP=`hostname -I | awk '{print $1}'`export ROS_HOSTNAME=`hostname -I | awk '{prin ...
- java HashMap 原理
jdk1.7 和 1.8 大致相同但还是有区别,主要是数据结构的区别,1.7 为数组+链表:1.8 为数组+链表+红黑树 关键知识点 加载因子:装填因子,目的是何时对 map 进行扩容,默认是 0.7 ...
- 关于精准UWB人员定位系统解决方案
WB技术, 目前主要应用在室内定位.人员定位系统等定位领域.近年来被应用在无线定位和雷达测距应用中,因此作为民用雷达和民用测距取得了较快的发展.而今天,我们主要要来介绍的产品就是UWB技术的芯片DW1 ...
- 【SSO单点系列】（6）：CAS4.0 之中文乱码
CAS登录会将登录名回传给客户端以xml的格式 但是回传后乱码客户端无法正确解析 二.解决方法 ServiceValidateController.java private ModelAndVie ...
- Ping命令的基本使用
一.Ping命令的基本使用 在网络中 ping 是一个十分强大的 TCP/IP 工具.我们通常会用它来直接 ping ip 地址,来测试网络的连通情况.它的作用主要为: 1.用来检测网络的连通情况和分 ...
- Python_七十二变_二进制和字符编码
第二章 七十二变 二进制和字符编码 8bit为1byte 字节 1024byte为1KB 千 1024KB为1MB 兆 1024MB为1GB 吉 1024GB为1TB 太 ASCLL字符 ...