<!DOCTYPE html>

<html>

  <head>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/croppie/2.6.2/croppie.js"></script>

    <link rel="Stylesheet" href="https://cdn.bootcss.com/croppie/2.6.2/croppie.css" />

    <style>

      button,

a.btn {

 background-color: #189094;

 color: white;

 padding: 10px 15px;

 border-radius: 3px;

 border: 1px solid rgba(255, 255, 255, 0.5);

 font-size: 16px;

 cursor: pointer;

 text-decoration: none;

 text-shadow: none;

}

button:focus {

 outline: 0;

} 

.file-btn {

 position: relative;

}

.file-btn input[type="file"] {

 position: absolute;

 top: 0;

 left: 0;

 width: 100%;

 height: 100%;

 opacity: 0;

} 

.actions {

 padding: 5px 0;

}

.actions button {

 margin-right: 5px;

}

.pop_main{display:none}

.pop_con{    width: 400px;

    height: 400px;

    background: #fff;

    z-index: 100;

    position: relative;}

.pop_mask{background-color: rgba(0, 0, 0, 0.5);position: absolute;

    width: 100%;

    left: 0;

    top: 0;

    bottom: 0;}

    </style>

  </head>

  <body>

    <div class="actions">

      <button class="file-btn">

       <span>上传</span>

       <input type="file" id="upload" value="选择图片文件" />

      </button> 

      <div class="pop_main">

        <div class="pop_con">

          <div> <button class="pop_close">x</button> </div>

          <div class="crop">

            <div id="upload-demo"></div>

            <button class="upload-result">裁剪</button>

          </div>

        </div>

      <div class="pop_mask"></div>

      </div>

      <div id="result"></div>

     </div>

     <script>

       $(function(){

 var $uploadCrop; 

  function readFile(input) {

    if (input.files && input.files[0]) {

      console.log("file----",input.files[0])

    var reader = new FileReader(); 

    reader.onload = function (e) {

     $uploadCrop.croppie('bind', {

      url: e.target.result

     });

    } 

    reader.readAsDataURL(input.files[0]);

   }

   else {

    alert("Sorry - you're browser doesn't support the FileReader API");

   }

  } 

  $uploadCrop = $('#upload-demo').croppie({

   viewport: {

    width: 200,

    height: 200,

    type: 'circle'

   },

   boundary: {

    width: 300,

    height: 300

   }

  }); 

  $('#upload').on('change', function () {

   $(".pop_main").show();

   $(".pop_con").css({'top':0,'opacity':0})

   $(".pop_con").animate({'top':'50%','opacity':1})

   readFile(this);

  });

  $('.upload-result').on('click', function (ev) {

   $uploadCrop.croppie('result', 'canvas').then(function (resp) {

     console.log("file---2",resp)

    popupResult({

     src: resp

    });

   });

  });

  $('.pop_close').on('click',function(ev){

    $(".pop_main").hide()

    var file = $("#upload")

file.after(file.clone().val(""));

file.remove();

  })

 function popupResult(result) { 

  var html;

  if (result.html) {

   html = result.html;

  }

  if (result.src) {

   html = '<img src="' + result.src + '" />';

  }

  $("#result").html(html);

 }

});

     </script>

  </body>

</html>

　　

剪裁圆形图片cropie的更多相关文章

  1. ios---剪裁圆形图片方法

    剪裁圆形图片 - (instancetype)xmg_circleImage { // 1.开启图形上下文 // 比例因素:当前点与像素比例 UIGraphicsBeginImageContextWi ...

  2. WindowsPhone8中实现圆形图片的生成显示

    原文 WindowsPhone8中实现圆形图片的生成显示 很多软件中(比如QQ)用到了许多圆形图片,作为用户头像等等,原始图片往往是方形的,那么怎么样将方形的图片显示成圆形呢? 一种方法是当背景为固定 ...

  3. Android 自定义圆形图片 CircleImageView

    1.效果预览 1.1.布局中写自定义圆形图片的路径即可 1.2.然后看一看图片效果 1.3.原图是这样的 @mipmap/ic_launcher 2.使用过程 2.1.CircleImageView源 ...

  4. android绘制圆形图片的两种方式

    看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...

  5. Glide实现圆角和圆形图片

    实现圆形图片 , 传参第一个为上下文, 第二个为角度 package com.hh.beauter.util; import android.content.Context; import andro ...

  6. iOS常见用户头像的圆形图片裁剪常见的几种方法

    在开发中,基本上APP的用户头像的处理都需要把用户所上传的方形图片,处理为圆形图片.在这里就总结三种常见的处理圆形图片的方法. 1.使用位图上下文 2.使用UIView的layer进行处理 3.使用r ...

  7. Android实现圆形图片

     情景再现: 写Android程序也有一段时间了,今天突然被问怎么实现一个圆形图片,很多app图像是圆形的.但是用户上传的图像可不是圆的,所以问题就来了,需要我们代码实现圆形图片.但是大脑飞转想到第三 ...

  8. UIImage类扩展返回一个带边框的圆形图片

    /** * 将image转换为圆型带边框的图片(最好写一个UIImage的类扩展) * * @param name 图片的名字 * @param borderWidth 外层边框的宽度 * @para ...

  9. Android_AsyncTaskDemo之QQ记步数（画圆形图片知识）

    今天学习了AsyncTask Android 的异步机制.我简单的实现我的一个小小案例--qq记步数.然后穿插一个画圆形图片的知识点. 由于所学知识有限,目前我计数,还有排名等等我就简单的利用随机数实 ...

  10. android通过Canvas和Paint截取无锯齿圆形图片

    一个通过Canvas和Paint截取无锯齿圆形图片. /** * 根据原图和变长绘制圆形图片 * * @param source * @param min * @return */ public st ...

随机推荐

  1. QT 连接SQLIte数据库

    1.新建一个qt应用程序 2.在.pro文件中添加 sql     (下图,可以查看使用方法) 添加结构查看: 3.开始连接数据库 4.运行结果查看: 5.查看数据库文件: 6.使用可视化工具创建一个 ...

  2. MS14-064/CVE-2014-6332漏洞复现（OLE远程代码执行漏洞、IE浏览器漏洞）

    漏洞介绍:MS14-064 Microsoft Internet Explorer Windows OLE Automation Array Remote Code Execution,主要利用IE浏 ...

  3. IDEA的常用快捷键和文档注释

    IDEA的常用快捷键 Alt + 回车 导入包,自动修正 Ctrl + N 查找类 Ctrl + Shift + N 查找文件 Ctrl + Alt + N 格式化代码 Ctrl + Alt + O ...

  4. C# 变量和表达式

    变量的命名: 第一个字符必须是字母.下划线或@: 其后的字符可以是字母.下划线或数字. 注意:区分大小写. 变量的类型: 数值类型 1.整数类型 byte.short.int.long sbyte.u ...

  5. python常用的六个字符串处理方法

    1.upper(将小写字母转换为大写) 语法: str.upper() 参数: NA 实例: a = 'abc' b = a.upper() print(b) 结果: ABC 2.lower(将小写字 ...

  6. Java基础学习：4、类和对象及方法

    类:事物的描述.是具备某些共同特征的实体的集合,它是一种抽象的数据类型,它是对所具有相同特征实体的抽象. 对象:该类事物的实例.在Java中通过new进行创建.是一个真实世界中的实体.对象是一种个性的 ...

  7. tp5中接口，需要跨页面传送id时，不使用地址栏传送id，使用session保存。

    在Tp5中使用ajax点击某个按钮或连接时需要跳转页面并传送数据. 一般情况下都是绑定到跳转地址的后面以地址栏的方式传输,然后再去相应的页面使用js扒下来,比较麻烦,而且地址栏传值也不安全. 下面这个 ...

  8. reduce（）

    from functools import reducea=[10,11,22,33]b=reduce(lambda x,y:x+y,a)<===>sum(a)print(b)

  9. Raize

    Raize.v5和Raize.v6 本人在windows10下装有delphi7和delphi2010,安装好Raize.v6后,两个版本delphi的控件页都找不到Raize控件,即使想编译相应的D ...

  10. Laravel 5.1 LTS 速查表

    https://cs.laravel-china.org/# Artisan // 在版本 5.1.11 新添加,见 http://d.laravel-china.org/docs/5.1/autho ...