之前一直使用python的PIL自定义裁切图片,今天有需求需要做一个前端的选择预览页面,索性就把这个功能整理一下,分享给大家. 实现思路: 1.前端页面: 用户选择本地一张图片,然后通过鼠标缩放和移动,确定自己所需要的图片切块,最终把图片切块的 左边距,上边距,长,宽这些个参数传给后台 2.后台: 使用的django,主要实现2部分的功能,第一:图片上传,第二:图片裁切 先看一张图片: 前端页面: 后台最后得到的图片: 对于该demo中,我用到了以下js插件: jquery-webox:弹出图层…

Jcrop是一款优秀的裁剪工具,它不仅可以裁剪图像,还可以裁剪canvas及任何的div元素,具体可参考: http://code.ciaoca.com/jquery/jcrop/ 基于Jcrop,开发一个js组件(Cut.js),使之可进行复用: (function(jQuery,window,undefined){     window.Cut = window.Cut || {};     var _default={         boxWidth:0,         boxHeig…

JcropImage cropping for jQuery Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:PHP)可以快速的实现图片裁剪的功能. 官网地址:http://jcrop.org/ 中文教程:http://code.ciaoca.com/jquery/jcrop/…

<1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发送数据给Action,在服务器端使用 Java API 对大图进行裁剪. <4> 保存大图裁剪好的头像到指定目录,完成业务. 下面一步一步做: 第一步:使用html标签上传需要裁剪的大图. 这一步说白了也就是使用Struts2自带的FileUpload功能,把图片进行上传具体代码如下: html页…

最近有这样一个需求,因为一个门户网站首页展示图片很长但很矮,自己截图怕有不到位,所以利用JQUERY 的 Jcrop组件做了一个在线裁图的功能. 初始化 $('#oldpicImg').Jcrop({ onChange: showCoords, onSelect: showCoords, aspectRatio: null }); 因为在下面加了个选项,在意在change这个事件里面绑定重新初始化 radios.change(function () { imgParameter.scaling…

0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating development workflow gulp - The streaming build system use-gulp grunt - the JavaScript Task Runner F.I.S - 前端集成解决方案 Web Starter Kit - 一个Google 提供的帮助开发者快速设置项目的工具…

JCrop用来裁剪图片,本篇想体验的是: 在视图页上传图片: 上传成功,跳转到另外一个编辑视图页,使用JCrop对该图片裁剪,并保存图片到指定文件夹: 裁剪成功后,在主视图页显示裁剪图片: 当然,实际项目中最有可能的做法是:在本页上传.裁剪并保存. □ 思路 →在上传图片视图页,把图片上传保存到一个临时文件夹Upload→在编辑裁剪视图页,点击"裁剪"按钮,把JCrop能提供的参数,比如宽度.高度.离顶部距离,离底部距离,离左右端距离等封装成类,传递给控制器方法→控制器方法根据接收到的…

上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar扩展插件,在此基础上做了移植到ExtJS 4.2,并扩展了默认值.form表单支持等功能. 1.1 JavaScript代码 /*! * 评分组件 */ Ext.define('App.Demo.RatingStarFiledDemoTab', { extend: 'Ext.panel.Panel'…

写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: function() { }; }, setNewNumber: function() { }) }, render: function() { === ); return ( <div> <button onClick = {this.setNewNumber}>INCREMENT&l…

1. react-router 对象式配置 和 组件式配置    组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-------indexRoute的onEnter钩子函数…