<!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的更多相关文章

  1. c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合，找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理（完全指北）

    c#封装DBHelper类   public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...

  2. 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

    转载  原文:http://www.divcss5.com/wenji/w732.shtml 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形. 二.使用布局技术   -    ...

  3. UIImage非正方形图片如何剪切为正方形

    有时候项目里做头像上传时候,必须要把用户从相册或是相机里的选择的图片剪切为指定大小的图片,遇到太大,太小或是太长的图片就需coregraphic来对图片进行剪切 废话不多说,直接上代码 /** * 剪 ...

  4. .net webapi 接收保存图片到服务器，并居中剪裁压缩图片

    原文链接:https:////www.cnblogs.com/Jackyye/p/12510943.html 每天解决一些c#小问题,在写微信小程序,或者一些手机软件接口,我们经常要用到上传图片到服务 ...

  5. php网页显示正方形图片缩略图

    需求是这样的:原始图片的大小是不定的,类似800*600.1000*756,现有一个页面要以正方形(60*60)显示这些图片,注意:图片只能在内存处理,不能缩小后保存到本地磁盘. 解决办法: html ...

  6. c# 制作正方形图片

    using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D ...

  7. caffe中使用crop_size剪裁训练图片

    layer { name: "data" type: "Data" top: "data" top: "label" i ...

  8. C#图片处理3种高级应用（高缩略图清晰度、图片剪裁、图片水印）

    利用C#图片处理的一些基本和高级应用,解决了显示排版时想让相片缩略图列表非常统一.整齐.和美观,每张缩略图大小固定为120 x 90且不拉伸变形,用户头像让缩略图比原图更清晰,上传的图片下加一个半透明 ...

  9. Photoshop制作Android UI:怎样从大图片中准确剪切出圆角正方形 图片

    如题所看到的,最初我是直接用PS的剪切工具,但发现有时不太好用. 由于你必须提前设好要剪切的尺寸. 也可能是我这小白不知道咋用. 下为摸索到的最好方法: 1.打开原图.新建图层,假设是png图片就不用 ...

  10. PS 多次剪裁同一图片

    一个图品里面有两个小图,要分别抠出来. 我以前的做法是,先扣一个,重新打开文件,再扣另外一个. 今天发现一个简单的办法,不用重新打开文件. 就是在扣完第一个的时候,打开历史记录面板,双击 打开 动作, ...

随机推荐

  1. Linux环境使用Docker安装SqlServer2017

    系统环境: CentOS 7.6 64位(同样适用于Ubuntu) 安装步骤: 1.创建文件夹 /home/docker/sqlserver/mssql 2.下载镜像并用外部匿名卷挂载数据 $ doc ...

  2. 获取指定n个工作日后的日期工具类

    import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.*;public class We ...

  3. redis之五种基本数据类型

    五种基本数据类型 redis存储任何类型的数据都是以key-value形式保存,并且所有的key都是字符串,所以讨论基础数据结构都是基于value的数据类型 常见的5种数据类型是:String.Lis ...

  4. kafka集群under replicated分析

    近期随着业务消息量增大,现网几套kafka集群频繁收到under repliacted告警,集合近期定位分析过程,主要有以下几个方面:1. 查看是否有主机挂掉,或近期是否有主机重启,通过kafdrop ...

  5. C/C++ union联合体介绍

    C/C++ union联合体介绍 文章参考:https://blog.csdn.net/mooneve/article/details/92703036 目录 C/C++ union联合体介绍 1. ...

  6. React-Navigation 5.x 的 demo案例

    一. stack路由结构的一些效果 (1)横向过渡动画 (2)整个选项卡样式修饰 最终实现效果:动态图 以上两个功能实现都很简单,我测试时,关注了一个问题,navigation 丢失.stackNav ...

  7. 初学pwn的课程第一课

    pwn的攻击基础原理 我的理解是主要通过分析主文件,然后获得有用信息,通过exploit对服务器输入指定的payload数据,获取服务器的shell,就是进入服务器的终端,获取服务器的控制权,对服务器 ...

  8. mybatis-plus 时间查询

    QueryWrapper userquery= new QueryWrapper<>(); user.and(true,wrapper -> wrapper.ge("CRE ...

  9. Win10家庭版找不到组策略gpedit.msc怎么办

    Win10家庭版找不到组策略gpedit.msc怎么办 @echo off pushd "%~dp0" dir /b %systemroot%\Windows\servicing\ ...

  10. word文件打开报错：abnormal program termination

    部分word文件打开后报错 处理方法 1.更改默认打印机 2.调整开机启动项 取消该项:cyberkI guard service的开机自启动 (赛博昆仑安全软件) 3.调整word的COM加载项