<!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. Telnet 连接smtp协议手动发邮件

    下面实验以QQ邮箱为例(比较多人用,其它邮箱也一样) Step1.打开CMD 输入:telnet SMTP服务器 SMTP端口地址   连接smtp服务器 Step2. 输入:helo 内容 (向它( ...

  2. jekins+shell

    1.安装jekins,常规的有直接下载war包,或者安装docker版本的安装. 2.启动命令 #war版本启动 nohup java -jar jenkins.war --ajp13Port=-1 ...

  3. 01Java常用类

    Object类 Object概述 Object类是超类,基类,所有类都默认直接继承Object类. Object类中定义的方法,是所有对象都具备的方法. Object类可以存储任何类 ​ - 可以作为 ...

  4. centos6.5最小安装不能联网

    因为个人需要,在一台笔记本安装centos6.5最小安装时遇到了无法有线联网,后面经过了几个小时的处理 总算理清楚并解决了这个问题.亲测有效而不是转载! 如上图所示 处理这个问题颇有感受,在网上找了很 ...

  5. jquery获取文档的或某个元素的html 闲的没事凑活事的教学

    // 获取文档的 // 这个是获取本文档可能被扩展插件和广告屏蔽器污染的html $(":root").prop("outerHTML"); // 利用prom ...

  6. B - Yet Another Palindrome Problem

    B - Yet Another Palindrome Problem 思路: 给一个长为n(≤5000≤5000)的数组,问是否存在一个长度至少为3的子序列是回文的.回文的定义是把序列reverse, ...

  7. npm vue-router安装报错

    因为2022年2月7日以后,vue-router的默认版本,为4版本,而且 vue-router4,只能在vue3中,只有vue-router3中,能用在vue 2中 如果把vue-router4强制 ...

  8. H5云图后台读写CAD文件-在线CAD，网页CAD，网页浏览编辑CAD

    说明 后台提供MxFileConvert.exe程序,它可以将CAD图纸转换成前台能加载显示的格式,程序调用方法见: https://help.mxdraw.com/?pid=32中的"如何 ...

  9. Go语言的常用函数方法整理大全-实践总结

    文章目录 前言 一.数据类型与相互转化 1.1 常用的数据类型 1.2 常用数据类型的转化 1.2.1 整形转字符串 1.2.2 字符串转整形 1.2.3 浮点转字符串 1.2.4 字符串转浮点 二. ...

  10. MySQL中的索引应用

    1.什么是索引(Index)? 官方的定义是索引是一种数据结构,从生活的纬度上讲,假如将一本书比作成一张表,这本书的目录就是表中的索引(Index). 2.索引的优势和劣势? 优势:数据量比较大时,为 ...