<!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. centos8下安装gcc11

    最近的云服务器使用的centos8,c以前编译器对c++20的新特性支持的较少,当前最新版的gcc对c++20的支持还是可以的,于是准备体验一下,首要就是升级gcc gcc官网:https://gcc ...

  2. C# 日期获得一天的起始时间

    dateTimePicker1.Value = Convert.ToDateTime(DateTime.Now.ToString("yyyy-MM-dd 00:00:00")); ...

  3. typescript学习 回顾查漏

    1.在public构造函数上使用on参数是一种速记,它使我们能够自动使用该名称创建属性. class Student { fullName:string; constructor(public fir ...

  4. sudo:Operation not permitted事件

    转载请注明来源:https://www.cnblogs.com/Sherlock-L/p/14933949.html 前言 事情是这样的,在风和日丽的一天,我如往常一样在服务器上敲下了sudo xxx ...

  5. Python 切片/列表/字符串之间装换

    1. 怎么实现字符串变为list 使用split(),把字符串拆分再存入数组: 例子 input="ni si shi" output=input.split(" &qu ...

  6. Java面向对象编程导论

    面向对象编程简介 JAVA是一门面向对象的编程语言.面向对象编程范式与面向过程编程范式同属于命令式编程范式,与函数式编程范式相区别.在面向对象编程范式中,我们将我们要处理的系统的业务逻辑表现为对象之间 ...

  7. argocd

    argocd Argo CD - Declarative GitOps CD for Kubernetes (argo-cd.readthedocs.io) What Is Argo CD Argo ...

  8. 批处理命令for循环(cmd命令)

    记录一下: https://www.cnblogs.com/Braveliu/p/5081087.html

  9. MQTT X 1.9.1 发布：资源消耗降低 80%，稳定性大幅提升

    经过两个 Beta 版本迭代,近日,MQTT 5.0 客户端工具 MQTT X 正式发布了 1.9.1 稳定版本. 该版本通过大规模性能优化以及已知问题修复实现了稳定性的飞跃提升.特别是在性能方面,以 ...

  10. C++ 11 数字转字符串新功能

    // 头文件 <string>string to_string (int val);string to_string (long val);string to_string (long l ...