在这一篇里,我来具体讲讲代码该如何写. 下面是jCrop的初始化代码 //图片裁剪插件Jcrop初始化 function initJcrop() { // 图片加载完成 document.getElementById('originalImg').onload = function () { var imgWidth = $("#originalImg").width(); var imgHeight = $("#originalImg").height(); //…
在本篇中我来介绍一下jcrop如何实时展现用户裁切的效果图以及在项目中使用该插件注意的问题. 首先,你们在创建头像时,都可以在旁边实时的看到我裁切后的效果图,就如博客园. 这个是如何实现的呢,其实并不难. 还记得我们在Jcrop插件初始化的时候配置了一个这个参数吗. 这个参数就是当裁切框不断变化的时候执行的方法. //简单的事件处理程序,响应自onChange,onSelect事件,按照上面的Jcrop调用 function showPreview(coords) { if (parseInt(…
上一篇简单的介绍了一下开发的背景以及一些学习资料,下面开始介绍如何上手. 一.下载jCrop http://deepliquid.com/content/Jcrop_Download.html 直接去官网下载就好了. 二.将插件部署到项目中. 一般引入这两个文件就可以了. 三.开始初始化插件. 最简单的初始化 $(document).ready( function(){ $("#xuwanting").Jcrop(); } ); 这块就要好好说说了,网上的demo大部分都是像这样直接对…
之前,项目经理为了提升用户体验让我在之前图片上传功能的基础上实现图片的裁切功能,作为一个前端小白来说听了这个需求心里一紧,毕竟没有做过,于是跟项目经理商量要先做下调研.在一上午的调研中发现了jCrop这个插件出现的概率最高而且也比较符合项目的要求并且网上的教程也很多,于是果断开始了对这个插件的实践. 先上做好的图片吧 首先,我是先看了一些网上的教程,这里列出一些网址,大家可以去参考. http://code.ciaoca.com/jquery/jcrop/ http://www.zhangxin…
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 minSize/maxSize设置 支持改变选区或移 动选区时的回调(Callback) 支持用键盘微调选区 通过API创建互动,比如动画效果 支持CSS样式 版本及Demo jQuery v1.5.1+ Jcrop v0.9.9 Demo地址:http://deepliquid.com/ 下载地址…
一.插件功能 用于对图片进行修剪.但是在使用Jcrop时,还需要配合服务器端开发语言(如asp.net,php等)使用. 二.官方地址 http://deepliquid.com/content/Jcrop.html在官方地址中有5个demo,在这5个demo中,有3个带有代码说明.有1个提供了完整的实例,前端(js)与后台(php)交互,修剪图片并显示.而本次测试时,后台使用的是asp.net来修剪图片.在文章的下面有完整的测试代码可供下载.官方Demo也可以下载,但是下载下来的文件包含js代…
(此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜索更合适的插件 首先试过PhotoClip,这个插件裁剪区域是固定的,不能自定义缩放(也许需求太匆忙没有研究透,亦或者可以修改原文件优化这一点),对于用户体验不够好,故,放弃 然后又遇到一款插件---Jcrop,完美符合需求,项目结合百度插件 WebUploader上传获取原图,可适配移动端选取相册…
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利用静态网页的形式进行展示. 二.用到的四个免费的jquery插件 注:都是网上免费的,自己测试过了,挺好用的,顺便改了改. 1.3D Change 下载地址:https://github.com/hjzgg/picture_show/tree/master/3D_change 效果展示 2.Samp…
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力. 您可能感兴趣的相关文章 精心挑选的优秀jQuery Ajax分页插件和教程 推荐几款很好用的 JavaScript 文件上传插件 精心挑选的优秀 jQuery 文本特效插件和教程 8款非常棒的响应式 jQuery 幻灯片插件推荐 精心挑选12款优秀 jQ…
Discuz!图片查看插件(支持鼠标缩放.实际大小.旋转.下载) 图片查看是网站中的常用功能,用于展示详细的图片.在discuz图片插件的基础上进行了改造,因此这篇文章主要从以下几个方面来讨论图片查看插件.希望可以帮助到大家,有不对的地方也欢迎大家给以正确的指导. (1)discuz的实现过程及效果 (2)discuz的局限性 (3)discuz的改进步骤 (4)兼容性及最后效果 (5)总结(常见问题) demo示例:http://zyk3.ataw.cn/discuz/index.html 一…