zoukankan      html  css  js  c++  java
  • 图片裁切插件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的初始化代码以及保存时怎么获取参数。

  • 相关阅读:
    常用算法之选择排序
    常用算法之插入排序
    常用算法之冒泡排序
    Python hashlib模块 (主要记录md5加密)
    Django Model
    CSS实现table td中文字的省略与显示
    JS读取文件,Javascript之文件操作 (IE)
    ie6789和其他浏览器之间的鼠标左、中、右键的event.button不一致的办法
    兼容和样式
    kindeditor的docs
  • 原文地址:https://www.cnblogs.com/kwzm/p/5179877.html
Copyright © 2011-2022 走看看