剪裁正方形图片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 多次剪裁同一图片
一个图品里面有两个小图,要分别抠出来. 我以前的做法是,先扣一个,重新打开文件,再扣另外一个. 今天发现一个简单的办法,不用重新打开文件. 就是在扣完第一个的时候,打开历史记录面板,双击打开动作, ...

随机推荐

DotNetCore2.1使用GitLab通过阿里云自动构建镜像上传阿里云仓库在Docker运行
操作步骤: 1.安装GitLab并添加项目(此处省略安装过程) 2.获取GitLab的Access Tokens 3.创建空的DotNetCore2.1 Api项目 4.项目添加Docker支持,文件 ...
还在拿flex进行布局吗？快来试试grid网格布局吧
例: 遇到这种布局要求我们应该怎么办? 方法1:使用flex布局 <style> * { padding: 0; margin: 0; } .gird_Box { width: 100vw ...
mybatis-generator插件的使用及相关配置
mybatis-generator主要用于逆向工程,根据数据库来生成实体类以及mapper映射文件 1.第一步先添加依赖 <dependency> <groupId>mysql ...
textfsm
from concurrent.futures import ThreadPoolExecutor import netmiko import os from threading import Loc ...
VS2022在打开设计器的时候提示某变量未声明或者未赋值
有可能是在属性中直接添加引用的dll文件,导致dll并不能被该文件稳定引用,可以删除引用,重新添加试试
C# 日期获得一天的起始时间
dateTimePicker1.Value = Convert.ToDateTime(DateTime.Now.ToString("yyyy-MM-dd 00:00:00")); ...
win10家庭版升级为专业版
1.选择此电脑点击属性 2.点击更改产品密匙 3.输入产品密匙 4N7JM-CV98F-WY9XX-9D8CF-369TT下一步等待升级重启即可.
成都信息工程大学第八届校赛 H J 题解
H. Bang Bang Keli Ba 题目大意给定数组 \(a\) ,构造递增序列 \(b\) 和递减序列 \(c\) 且 \(a_i=b_i+c_i\) . 题解下面证明解的存在性,存在性证 ...
spring的aop的粗浅理解
aop有什么用? 假设你写了一本书,写的是一个平民的日常聊天.现在突然你想让这个平民变成一个书生的口气.于是你想在这个平民的每句话之前加上"之乎",后面加上"者也&quo ...
win10系统IE浏览器打不开点击无反应解决办法
打开左下角开始菜单步骤阅读 2 点击右边的Cortana,在下面的输入框中输入:regedit,等待它自动搜索出来后,以管理员身份打开这个注册表编辑器:当然熟悉电脑的同学可以直接打开运行----re ...

剪裁正方形图片cropper

剪裁正方形图片cropper的更多相关文章

随机推荐

热门专题