jquery photoClip插件怎么用?photoClip教程实战示例

编程之家收集整理的这篇文章主要介绍了jquery photoClip插件怎么用?photoClip教程实战示例编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

《jquery photoClip插件怎么用?photoClip教程实战示例》要点:
本文介绍了jquery photoClip插件怎么用?photoClip教程实战示例,希望对您有用。如果有疑问,可以联系我们。

相关主题html5和webapp / JS、Jquery插件

jquery photoClip怎么用?下载的包中有一个简单教程。这里再实战示范一个例子。

下载包 https://github.com/topoadmin/photoClip


一、先看看效果

这是编程之家PHP会员后台修改资料页。二维码的地方将应用到它。

操作流程:

图1是排版效果图,

用户选好图片文件上传二维码后,就出现图2中的截图框,选好区域按确定后,关闭自己,把截图结果显示在预览框中


二、代码实现:

1、HTML部分:

需要完成 :

    A、确认裁剪按钮 #clipBtn,

    B、预览区 #ImgPrView,

    C、结果显示区 #ImgPr,

    D、保存结果的表单隐藏域 #newqrcode。

    E、上传文件域 file控件 #wechatqrcode

<div class="col-md-1" style="position: relative;">
       <div id="ImgPrViewInfo"><a class="btn btn-info" id="clipBtn">调好点此确认</a> 【帮助】图片可拖动。鼠标中轮或手机上用双指可缩放图片&nbsp;<i class="icon iconfont icon-close3 closepreview"></i> </div>
       <div id="ImgPrView"></div>
       <div  id="ImgPr" class="col-md-2" style="" >
         <i class='fa fa-qrcode  fa-4x' style='width: 50px;height:50px;'></i><br /><br />
         <b>微信默认二维码上传预览</b><br />
         大小260*260px,80KB内<br /><br />
         只需正方形即可,若原图中有不必要部分,只保留二维码正方形
</div>
<input type="hidden" value="" name="newqrcode" id="newqrcode">
</div>

注意我们做了一个隐藏域newqrcode是用来接收实际截图后接收的base64代码,给服务端处理用。


2、CSS部分:

<style>
       #ImgPr{text-align:center;position: absolute;width:260px;height:260px;right: -180px;top:-70px;z-index:50;border: 1px solid #ccc;border-radius: 10px;padding: 18px;}
       #ImgPr img,#ImgPrView img{max-width:100%;max-height:100%;text-align:center;}
       #ImgPrView,#ImgPrViewInfo{display:none;position:absolute;top:-160px;left:-20px;height:480px; width:530px;border:1px solid #ccc;border-radius: 8px;z-index: 9999;background-color: #fff; }
       #ImgPrViewInfo{z-index:99999; background-color: #fff;height:50px;border-radius: 8px 8px 0 0;line-height: 50px;padding: 2px 5px 10px;text-align: center;}
       .closepreview{color:red;cursor: pointer}
</style>


3、JS部分:

(1)引入相关的js文件(需要jQuery):


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


(2)核心代码部分:

其中,ImgPrView区是预览区,插件是绑定到这个区。

//预览面板关闭按钮
$('.closepreview').click(function (e){
       $('#ImgPrView,#ImgPrViewInfo').hide();
});

$('#ImgPrView').photoClip({
       width: 260,       height: 260,       fileMinSize: 10,       file: $('#wechatqrcode'),  //文件上传域
       ok: $("#clipBtn"),   //确认按钮
       strictSize: true,  //设置为true,则表示截取出的图像宽高严格按照截取区域宽高输出。否则上面widht和height只是做为比例锁定使用
       //defaultImg: "初始图",       loadStart: function() {
              $('#ImgPrView,#ImgPrViewInfo').show();
              //console.log("照片读取中");
       },       loadProgress: function(progress) {
              console.log(progress);
       },       loadError: function() {
              console.log("图片加载失败");
       },       loadComplete: function() {
              console.log("照片读取完成");
              //$('#ImgPrView,#ImgPrViewInfo').show();  
       },       imgSizeMin: function(kbs) {
              console.log(kbs, "上传图片过小");
       },       clipFinish: function(dataURL) {
              var imglen = $('#lastImgShow').length;
              if(imglen==0){
                     $('#ImgPr').html('<img id="lastImgShow" src="'+dataURL+'" />');
              }else{
                     $('#lastImgShow').attr('src', dataURL);
              }
              $('#ImgPrView,#ImgPrViewInfo').hide();
              $('#newqrcode').val(dataURL);
       }
});


大功告成,现在可以上传到服务器,PHP端接收到的$_POST['newqrcode'] 就可以转成图片保存了。

需要说明的是的,这样上传图片,比正常的图片会大不少,比如本例一张二维码图片正常40-70K左右,截图去掉不必要的部分后,上传保存完仍有100KB多,

因此,需要再配合图片压缩函数,可以压到20K左右。

总结

以上是编程之家为你收集整理的jquery photoClip插件怎么用?photoClip教程实战示例全部内容,希望文章能够帮你解决jquery photoClip插件怎么用?photoClip教程实战示例所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478

猜你在找的jQuery相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势,有相当一部分
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称: 为了避
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: html结构代码: css样式: 引入的js 调用的一般形式: 实现的效果如图:
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案。 AMD 模块格
jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践。 根据《jQuery高级编程》的描述,
记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅。 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作
在网页应用中,一般会用到上传文件或者图片什么的到服务器,那么可以用ajaxfileupload.js,但是在使用ajaxfileupload.js时候,当服务器返回的json带有&amp;符号的时候,
首先先搭写一个基本的格式: 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部,如下: 那么接下来我们就在里面实现点击文章图片弹出该图片并放大的效果。 整体代码如下: 参考地址:ht
元素属性和Dom属性简介 对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也
实现思路 1.在一定的频率下在页面中生成一定数目的雪花从上往下飘落; 2.在指定的时间内飘落后移除页面; 3.可设置雪花的大小,在一定范围内随机雪花大小; 4.什么时间后清除生成雪花,停止函数。 js