图片裁切插件jCrop的使用心得(一)

之前,项目经理为了提升用户体验让我在之前图片上传功能的基础上实现图片的裁切功能,作为一个前端小白来说听了这个需求心里一紧,毕竟没有做过,于是跟项目经理商量要先做下调研。在一上午的调研中发现了jCrop这个插件出现的概率最高而且也比较符合项目的要求并且网上的教程也很多,于是果断开始了对这个插件的实践。

先上做好的图片吧

首先,我是先看了一些网上的教程,这里列出一些网址,大家可以去参考。

http://code.ciaoca.com/jquery/jcrop/

http://www.zhangxinxu.com/jq/jcrop_zh/

基本上看了这两篇文章就能了解的差不多了,一个是API,一个是demo。

第一篇文章就当做一个简单的介绍吧,我不喜欢一篇文章里写太多内容,所以我将分几篇文章来写。

时间: 2024-10-14 12:48:56

图片裁切插件jCrop的使用心得(一)的相关文章

图片裁切插件jCrop的使用心得(三)

在这一篇里,我来具体讲讲代码该如何写. 下面是jCrop的初始化代码 //图片裁剪插件Jcrop初始化 function initJcrop() { // 图片加载完成 document.getElementById('originalImg').onload = function () { var imgWidth = $("#originalImg").width(); var imgHeight = $("#originalImg").height(); //

图片裁切插件jCrop的使用心得(二)

上一篇简单的介绍了一下开发的背景以及一些学习资料,下面开始介绍如何上手. 一.下载jCrop http://deepliquid.com/content/Jcrop_Download.html 直接去官网下载就好了. 二.将插件部署到项目中. 一般引入这两个文件就可以了. 三.开始初始化插件. 最简单的初始化 $(document).ready( function(){ $("#xuwanting").Jcrop(); } ); 这块就要好好说说了,网上的demo大部分都是像这样直接对

jQuery 图片裁剪插件 Jcrop

Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 minSize/maxSize设置 支持改变选区或移 动选区时的回调(Callback) 支持用键盘微调选区 通过API创建互动,比如动画效果 支持CSS样式 版本及Demo jQuery v1.5.1+ Jcrop v0.9.9 Demo地址:http://deepliquid.com/ 下载地址

node.js(express)中使用Jcrop进行图片裁切上传

需求说明 简单来说就是要实现用户上传头像,并且要保存用户裁切后的部分作为用户头像. 第一步,选择图片: 第二步,在弹窗页面中展现并进行裁切: 第三步,点击"保存",上传服务器. 实现过程 说来有点坎坷,相当于做了2遍,走了弯路. 第1遍是用户一选择图片,就进行了上传,然后返回一个地址,所以在弹层上展现的图片已经是服务器上的图片了,然后进行裁切,再保存. 第2遍找到的一个方法,是在第1遍做到裁切处理时候想到的,即弹层展现的是用户机器上选择的图片,不用先上传,但是用image/base64

支持移动端裁剪图片插件Jcrop(结合WebUploader上传)

(此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜索更合适的插件 首先试过PhotoClip,这个插件裁剪区域是固定的,不能自定义缩放(也许需求太匆忙没有研究透,亦或者可以修改原文件优化这一点),对于用户体验不够好,故,放弃 然后又遇到一款插件---Jcrop,完美符合需求,项目结合百度插件 WebUploader上传获取原图,可适配移动端选取相册

PHP结合JQueryJcrop实现头像图片裁切实例代码

看到一些网站上有图片剪切的功能,觉得挺炫,后来找了一款专用于图片裁切的插件,jquery.Jcrop.min.js,用这个插件可以方便的实现这个功能,使用时鼠标在图片上圈选出选区,即可把图片裁切成所选部分,非常适合用于头像的裁切编辑功能.前端UI分享 演示分为HTML和php两部分: 第一部分,HTML代码: .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

新修正的 Ajax PHP 图片裁切-来自www.srcfans.com开源代码

Ajax PHP Image Cut PHP图片裁切,图片裁切之生成缩略图部分和预览功能的实现,这是一个关于PHP Ajax裁切图片并在服务器端生成新图片的简单例子,这次不是jquery,而是使用另一个有名的JS插件:prototype,同样具有很好的性能.本图片裁切在 IE11 , FireFox 5 , Chrome55下测试通过(Opear 下有一点点问题,剪切框的初始位置不对,这个问题研究至今一直没解决掉,抱歉!). 在线演示:http://www.srcfans.com/demo/im

jquery 图片处理插件

JQuery Jcrop 实现图片裁剪的插件 the jQuery Image Cropping Plugin jquery 图片处理插件,布布扣,bubuko.com

5款好用的开源JS图片裁剪插件(3个jQuery插件,2个AngularJS插件)

tapmodo / Jcrop Jcrop是人气最高的图片裁剪jQuery插件,stars数量2k+,功能非常丰富,文档齐全,首选.Github.com官网也使用了这个插件.有一个小细节是,边框线的蚂蚁线是动画的,真的很用心. Jcrop项目地址 | demo1 | demo2 | demo3 | demo4 fengyuanchen / cropper Cropper也是一款图片裁剪jQuery插件,stars数量1k+,是杭州的前端工程师Fengyuan Chen所写的,功能也相当丰富,裁剪