js插件---图片裁剪photoClip

一、总结

一句话总结：页面裁剪图片得到base64格式的图片数据，然后把这个数据通过ajax上传给服务器，服务器将base64图片数据解析成图片并且保存到服务器上面，并且返回图片在服务器上的地址。

二、图片裁剪photoClip

1、截图

 

2、代码（代码需要放到web服务器里面，因为带了裁剪后图片上传服务器的功能）

百度盘下载链接：链接：https://pan.baidu.com/s/1-kZzwmIvtwLpGA8GrhVHPA 密码：oj8u

裁剪页面代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <meta http-equiv="X-UA-Compatible" content="IE=edge">

         <meta name="renderer" content="webkit">

         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

         <meta http-equiv="Cache-Control" content="no-siteapp" />

         <title>裁剪图片演示-带初始值</title>

         <link rel="stylesheet" type="text/css" href="../dist/amazeui.min.css" />

         <style type="text/css">

             #clip {

                 width: 100%;

                 height: 400px;

             }

         </style>

     </head>

     <body>

         <div id="clip"></div>

         <div class="am-margin-sm">

             <button type="button" class="am-btn am-btn-primary" id="toggle-file">上传头像</button>

             <button type="button" class="am-btn am-btn-primary" id="clipBtn">裁剪</button>

         </div>

         <input class="am-hide" type="file" id="file">

         <img class="am-img-circle" id="img-view"/>

         <script src="../dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>

         <script src="../dist/iscroll-zoom.min.js" type="text/javascript" charset="utf-8"></script>

         <script src="../dist/hammer.min.js" type="text/javascript" charset="utf-8"></script>

         <script src="../dist/photoClip.min.js" type="text/javascript" charset="utf-8"></script>

         <script>

             $(function() {

                 var $clip = $("#clip");

                 var $file = $("#file");

                 $("#toggle-file").click(function() {

                     $file.trigger("click");

                 });

                 $clip.photoClip({

                     width: 400,

                     height: 300,

                     fileMinSize: 20,

                     file: $file,

                     defaultImg: "../img/4.jpg",

                     ok: "#clipBtn",

                     loadStart: function() {

                         console.log("照片读取中");

                     },

                     loadProgress: function(progress) {

                         console.log(progress);

                     },

                     loadError: function() {

                         console.log("图片加载失败");

                     },

                     loadComplete: function() {

                         console.log("照片读取完成");

                     },

                     imgSizeMin: function(kbs) {

                         console.log(kbs, "上传图片过小");

                     },

                     clipFinish: function(dataURL) {

                         document.getElementById("img-view").src = dataURL;

                         $.post("index.php", { dataURL: dataURL},

                           function(data){

                           alert("Data Loaded: " + data);

                           });

                         console.log(dataURL);

                     }

                 });

             })

         </script>

     </body>

 </html>

后台接收并处理图片代码

 <?php

 //print_r($_POST);

 $base_img=$_POST['dataURL'];

 // $base_img是获取到前端传递的值

 $base_img = str_replace('data:image/jpeg;base64,', '', $base_img);

 //  设置文件路径和命名文件名称

 $path = "./";

 $output_file = time().rand(100,999).'.jpeg';

 $path = $path.$output_file;

 //  创建将数据流文件写入我们创建的文件内容中

  file_put_contents($path, base64_decode($base_img));

 // 输出文件

 print_r($output_file);

   ?>
 

js插件---图片裁剪photoClip的更多相关文章

  1. js插件---图片裁剪cropImgBox（适合练习编写插件之用）

    js插件---图片裁剪cropImgBox(适合练习编写插件之用) 一.总结 一句话总结:无论是灰度还是高对比度的图片,都是先处理canvas的像素,使其变成灰度或者高对比度,然后再用canvas.t ...

  2. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  3. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  4. node.js平台下，cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  5. cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  6. smartcrop.js智能图片裁剪库

    今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js.它是一款图片处理的智能裁剪库.在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等. ...

  7. js插件-图片椭圆轮播效果

    插件效果图: html 代码如下: <div id="container"> <img src="images/cartoon/1.jpg" ...

  8. H5项目 使用Cropper.js 实现图片 裁剪 操作 (APP端)

    参考地址: 1.https://www.jianshu.com/p/b252a7cbcf0b 2.https://blog.csdn.net/weixin_38023551/article/detai ...

  9. 基于cropper.js的图片上传和裁剪

    项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...

随机推荐

  1. 是否可以从一个static方法内部发出对非static方法的调用

    不可以.因为非static方法是要与对象关联在一起的,必须创建一个对象后,才可以在该对象上进行方 法调用,而static方法调用时不需要创建对象,可以直接调用.也就是说,当一个static方法被调用时 ...

  2. John Morgan:黎曼几何、曲率、Ricci流以及在三维流形上的应用二讲

    本文是笔者在线看Lektorium上John Morgan在圣彼得堡国立大学欧拉研究所的讲座做的笔记.第一讲以如下内容组成 1. 黎曼曲面上的联络 黎曼流形$(M^n,g)$中,$M$为$n$维流形, ...

  3. 个人创业了，做了个网站和App，www.91tianwu.com

    大家好! 很久没有写文章了,响应党和政府号召,创业了.此文为了推广我的网站而写,希望有兴趣的看看. 我做了添物网,地址:http://www.91tianwu.com. 主要做购物导航推荐,目前集中在 ...

  4. 时间就是金钱HNCOI2000(最短路)

    时间就是金钱HNCOI2000 版权声明:本篇随笔版权归作者YJSheep(www.cnblogs.com/yangyaojia)所有,转载请保留原地址! 人们总是选时间最短或费用最低的路线 例如, ...

  5. mysql-过程与函数

    一.过程与函数简介 过程与函数是命名的PL/SQL块(也是用户的方案对象),被编译后存储在数据库中,以备执行.因此,其他PL/SQL块可以按名称来使用他们.所以可以将商业逻辑.企业规划写成函数或过程保 ...

  6. Android 流量分析 tcpdump &amp; wireshark

    APP竞争已经白热化了,控制好自己Android应用的流量能够给用户一个良好的用户体验噢,给用户多一个不卸载的理由. Android 怎样进行流量分析?用好tcpdump & wireshar ...

  7. 自己封装js组件 - 中级中高级

    接着做关于alert组件的笔记 怎么又出来个中高级呢 对没错 就是出一个中高级来刷流量呵呵呵,但是中高级也不是白叫的 这次主要是增加了widget类,增加了自己绑定的事件和触发事件的方法!这么做是为什 ...

  8. nodejs02

    Node.js没有根目录的概念,因为它根本没有任何的web容器! 让node.js提供一个静态服务,都非常难! 也就是说,node.js中,如果看见一个网址是 1127.0.0.1:3000/fang ...

  9. struts2 validate验证

    转自:https://blog.csdn.net/houpengfei111/article/details/9038233 自定义拦截器 要自定义拦截器需要实现com.opensymphony.xw ...

  10. kafka集群安装配置

    1.下载安装包 2.解压安装包 3.进入到kafka的config目录修改server.properties文件 进入后显示如下: 修改log.dirs,基本上大部分都是默认配置 kafka依赖zoo ...