<!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. Windows10使用VMware安装centos

    系统环境: Windows 10 安装步骤: 1.下载centos http://mirrors.aliyun.com/centos/ 2.使用VMware安装centos 3.配置网络 $ cd / ...

  2. element的upload手动submit前动态设置上传请求地址

    标签地址绑定一个变量 动态修改上传请求地址代码: nextTick是DOM更新后触发,不使用nextTick直接submit,上传地址仍然会使用初始url地址 _this = this; this.u ...

  3. 2023 2 4 c++NOIP机试 小豫豫在郑州 type

    1 #include <iostream> 2 #include <string> 3 using namespace std; 4 int j(string str){ 5 ...

  4. SimplCommerce 核心

    EF配置 using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks ...

  5. apollo源码同时兼容mysql、postgresql、oracle解决思路

    本文摘录 apollo源码采用的是jpa规范 Hibernate 进行持久化的ORM框架 解决思路: 思路一:使用jpa配置文件persistence.xml文件,根据使用的数据库动态加载实体类与数据 ...

  6. FRP 反向代理渗透

    前言 之前在一个项目中遇到了一个渗透环境,只能使用工具代理远程访问内网,于是便接触了FRP这款内网穿透工具,通过内网反向代理进行远程渗透测试.这篇文章就简单介绍如何实现FRP反向代理渗透,作为个人笔记 ...

  7. 读取excel等文件根据注解自动装填为实体类

    问题:以前每次读取excel 都是根据第几列来装填实体类里面的属性.写起来很麻烦.还要判断. 思路: 1.因为每次读取excel 或者word表格 都能得到是第几列的数据,那么可以知道每列数据的ind ...

  8. ajv参数验证

    1.验证枚举类型 var schema = { "properties": { "data": { "type": "object ...

  9. Mysql 索引心得

    1. 频繁查询的字段,应该创建索引. 2.更新非常频繁的字段,不应该创建索引. 3.唯一性太差的字段,比如 gender字段,就不应该创建索引. 4.不会出现在where条件之后的字段,不应该创建索引 ...

  10. C# load and unload dll

    1. Invoker Any c# project Create a new application domain Create a proxy within the domain Unload th ...