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

上一篇简单的介绍了一下开发的背景以及一些学习资料,下面开始介绍如何上手。

一、下载jCrop

http://deepliquid.com/content/Jcrop_Download.html

直接去官网下载就好了。

二、将插件部署到项目中。

一般引入这两个文件就可以了。

三、开始初始化插件。

最简单的初始化

$(document).ready(
function(){
 $("#xuwanting").Jcrop();
}
);

这块就要好好说说了,网上的demo大部分都是像这样直接对一个页面中

已经存在的图片进行初始化,但是项目中往往不是这样的,一般是需要用户先上传一个图片,然后再对这个图片进行裁切。

所以大概步骤如下:

1、用户上传图片(通过图片上传插件)。

2、服务器返回图片的服务器地址(url)。

3、将url赋值到img元素中让图片展示出来。

4、jCrop插件初始化。

5、用户裁切图片点击保存。

6、将保存后的图片裁切的参数传给后台。

7、后台通过这些参数来对图片进行裁切。

8、后台返回裁切好的图片url,可以用来展示。

那么大家看到这大概就发现了,其实真正意义上的图片裁切是通过后台来完成的,jCrop只是给我们返回了图片裁切的参数,后台根据这些参数来裁切图片。

所以,功能的实现是离不开后台同学的帮助的。

再下一篇里我将具体写明jcrop的初始化代码以及保存时怎么获取参数。

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

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

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

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

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

之前,项目经理为了提升用户体验让我在之前图片上传功能的基础上实现图片的裁切功能,作为一个前端小白来说听了这个需求心里一紧,毕竟没有做过,于是跟项目经理商量要先做下调研.在一上午的调研中发现了jCrop这个插件出现的概率最高而且也比较符合项目的要求并且网上的教程也很多,于是果断开始了对这个插件的实践. 先上做好的图片吧 首先,我是先看了一些网上的教程,这里列出一些网址,大家可以去参考. http://code.ciaoca.com/jquery/jcrop/ http://www.zhangxin

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.

推荐一款手机端的图片滑动插件iSlider

首先先放出中文官方地址   http://be-fe.github.io/iSlider/index.html 这是demo 众所周知,移动端的图片滑动插件有很多,为什么我要推荐这个iSlider呢? 这个插件吸引我的有两点, 一是它不依赖与jquery,采用原生代码书写.二是它使用起来非常容易,而且除了图片,还支持普通的dom元素,滑动方式多样,效果丰富. 但是它也有些缺点,其一就是它提供的接口太少了. 在为轮播图片提供一些功能按钮时,比如说,上一张.下一张.自动播放等.使用这个插件就有些力不

Html5添加制作全屏响应式效果的图片画廊插件教程

一.安装 npm install jquery-gallerybox 二.使用方法 <link rel="stylesheet" type="text/css" href="css/gallerybox.css">               <script src="js/jquery.min.js"></script> <script src="js/jquery.gal

新修正的 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