<!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. Qt构造函数和析构函数报错undefinedreferenceto`vtable for 。。。。'

    百度了一堆,说各种的都有,无非就是说什么构造函数没有实现父类的纯虚函数,但是我明明继承并实现了,,,最后发现可能就是单纯的Qtcreater抽风了,一开始在构造里面清理了项目,发现不行. 于是一不做二 ...

  2. pure-ftpd(源码编译)中文编码问题

    1.由于版本问题,该软件有些版本不能编译--with-rfc2640选项.解决办法为换成相应低一点的版本 tar -xf pure-ftpd-1.0.42.tar.gz cd pure-ftpd-1. ...

  3. Mac上好用的app们

    记录下自己在mac上用的一些很不错的app,大多免费. 排名随缘. 不定期更新. Amphetamine 来源 AppStore 说明 欢迎使用Amphetamine,一款为macOS打造的最棒的防睡 ...

  4. 【QT】打包QT程序

    发布QT程序时需要把依赖的库拷贝到程序所在文件夹下,可以使用如下方式: 命令行输入cmd,cd 到程序所在文件夹,输入windeployqt xx.exe --release 注xx.exe是程序的名 ...

  5. Vmware-workstation - Centos8.0扩容磁盘空间 / 目录

    1. 软件版本 vmware workstation  15 pro 虚拟机: centos8.0 2.将虚拟机关机选择扩容到多大 3. 进入操作系统,执行lsblk查看sda盘的情况.下图所示,需要 ...

  6. [Docker-2]排查基于docker部署mysql主从过程中遇到“Slave_IO_Running: Connecting”这个疑难杂症

    关于"Slave_IO_Running: Connecting"的排查方法,已经有很多博客写得清清楚楚了(很多都是复制粘贴..真浪费时间),那么如果已有的常规排查方法都不能解决你的 ...

  7. C语言II博客作业04

    C语言II-作业04 作业头 这个作业属于哪个课程 https://edu.cnblogs.com/campus/zswxy/SE2020-2/?page=2 这个作业要求在哪里 https://ed ...

  8. SQL CASE 标注

    根据 状态值 显示中文备注 case when a.zht='0' then '录入' when  a.zht='1' then '待审核' when a.zht='2' then '已审核' end ...

  9. Java 根据模板导出PDF

    目录 前言 思路一:直接导出pdf 使用itext模板导出pdf 思路二:先导出word再转成pdf 1)导出word 2)word转pdf 最终方案 docx4j spire.doc.free + ...

  10. Django中的app模型细节TypeError: __init__() missing 1 required positional argument: 'on_delete' 解决办法

    TypeError: init() missing 1 required positional argument: 'on_delete' 解决办法 当执行应用app模型迁移时: python man ...