<!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. 2022-05-26内部群每日三题-清辉PMP

    1.在执行关键路径上的一项活动时,职能主管将涉及这个活动的两个项目资源调去支持解决某个应急情况,项目经理应该怎么做? A.实施应急计划 B.快速跟进关键路径 C.与职能经理协商分配替代资源 D.将该问 ...

  2. Oracle 验证身份证号

    --验证身份证号是否正确CREATE OR REPLACE FUNCTION fn_checkidcard (p_idcard IN VARCHAR2) RETURN INT IS v_regstr ...

  3. react 本地 DevServer启动之后找不到静态资源404

    起因:更改路由嵌套方式,基础路径不是 '/' 本地启动项目之后 请求静态资源404,前边加了路由路径, 原因:打包之后相对路径改变了,解决:在output里的publicPath :'/'

  4. vue3使用echarts插件并实现点击下载图表功能

    接到一个新的需求,就是用vue3制作一幅世界地图,并实现点击下载按钮将图表转变为图片下载到本地. 使用插件: html2canvasnpm安装: npm install html2canvas组件引入 ...

  5. 数位dp（ tzoj6061：Bomb-求49个数；tzoj1427: 不要62）

    6061:http://www.tzcoder.cn/acmhome/problemdetail.do?method=showdetail&id=6061 dfs记忆化搜索 #include& ...

  6. MAMP PRO 使用指南 （配置nginx 重写）

    https://sawlove.com/mamp-pro-use-for-wp.html 1 location / { 2 if (!-e $request_filename) { 3 rewrite ...

  7. JQuery 的$.each取值

    原文:https://www.cnblogs.com/zhaixr/p/7069857.html 1.遍历一维数组 var arr1=['aa','bb','cc','dd']; $.each(arr ...

  8. hadoop集群搭建之测试集群，配置历史服务器，日志聚集，时间同步

    hadoop集群搭建之测试集群,配置历史服务器,日志聚集,时间同步前期概要:我们完全分布式集群已经搭建完毕,并且还写了群启/群关的脚本, 接下来有必要来测试一遍集群,我们可以使用官方的案例,用它们在集 ...

  9. docker 安装portainer容器后，启动/Portainer 安装MySQL并开启远程访问

    启动命令: docker run -d -p 9000:9000 --restart=always -v /var/run/docker.sock:/var/run/docker.sock --nam ...

  10. debian11 配置samba服务 linuxsys

    一.安装软件包 sudo apt -y install samba samba-common 二.linux系统添加samba需要用的账户,创建需要共享的文件夹,并配置好权限.(注意共享文件夹最好不要 ...