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. 【BZOJ4940】【YNOI2016】这是我自己的发明

    阅读此篇文章前请先跟我大喊三声:dllxl!dllxl!dllxl! 咳咳. 题意: Description 给一个树,n 个点,有点权,初始根是 1. m 个操作,每次操作: 1. 将树根换为 x. ...

  2. [USACO4.2]完美的牛栏The Perfect Stall

    题目:USACO Training 4.2(在官网上提交需加文件输入输出).洛谷P1894. 题目大意:有n头奶牛m个牛栏,每头牛只会在自己喜欢的牛栏里产奶,问一次最多有多少奶牛能产奶. 解题思路:二 ...

  3. BZOJ 3166 [HEOI2013]Alo (可持久化01Trie+链表)

    题目大意:给你一个长度为$n$的序列,让你找出一段子序列,求其中的 次大值 异或 序列里一个数 能得到的最大值 先对序列建出可持久化$Trie$ 按元素的值从小到大遍历,设当前元素的位置是i,找出它左 ...

  4. The Zen of Python, by Tim Peters

    Beautiful is better than ugly. Explicit is better than implicit. Simple is better than complex. Comp ...

  5. JavaWeb利用cookie记住账号

    JavaWeb利用cookie记住账号. 首先,来看看界面什么样子. 记住账号最普遍的做法,就是在点击登录时,将账号保存到cookie中. 材料准备 <script src="${ct ...

  6. Android4.2.2下Stagefright下OMX编解码器组件的控制流

    本文均属自己阅读源代码的点滴总结.转账请注明出处谢谢. 欢迎和大家交流. qq:1037701636 email:gzzaigcn2012@gmail.com Android源代码版本号Version ...

  7. html+css实现选项卡功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. codeforces@281 B

    shui #include<iostream> #include<cstdio> #include<cstring> #include<algorithm&g ...

  9. layer是什么

    layer是什么 总结 layer就是一个web弹框 简介 layer是一款web弹层组件,致力于服务各个水平段的开发人员. 可以让你想到即可做到的web弹窗 概述 [1]  layer,一个可以让你 ...

  10. hdoj--1408--盐水的故事（技巧）

    盐水的故事 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...