- 浏览: 162647 次
- 性别:
- 来自: 华东
文章分类
最新评论
-
chen_miao:
我是初学者,请问,我在flex设计好了带有按钮和下拉框的界面, ...
ruby+flex实现天气预报 -
barrytyh:
很多技术人员都有想法,但忘了一个根本性的问题,谁在给你MONE ...
互联网创业与软件开发 -
fireflyman:
囧......
关于并发和并行 -
fireflyman:
你老再次出现了
谈谈互联网新产品如何起步 -
qhh394141930:
写得很详细,受教了。谢谢!
从瀑布模型、极限编程到敏捷开发
在rails上传头像的过程中,一般后端会采用rmagick/mini_magick进行裁剪,但会遇到一个这样的问题,如果用户上传的图片是极不规则的,那么最后裁剪的结果和原图片相去甚远,或者用户只需要该图片中的某一部分作为头像,所以用户不得不把图片ps后再上传,现在很多网站都有自定义头像上传,比如豆瓣就是先裁剪再让用户调整,之后再裁剪出用户满意的正方形头像,javascript-image-cropper-ui http://www.defusion.org.uk/ 就是这样的一个帮助你在客户端调整图片的js库,它基于prototype、scriptaculous、dragdrop等库,所以在rails使用它是很自然而然的事情,它支持很多种效果,其中最常用的就是Preview效果,就是在调整的过程中,同时出现预览效果,下面是我配合attachment_fu使用的例子。
1 在model中定义裁剪参数,其中thumb是最终需要的图片
:thumbnails => { :medium => '800x800>', :thumb => '100x100!' }
2 下载cropper,http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/,将lib文件夹以及cropper.css拷贝到javascripts文件夹下面,之后在layout中
引用
<%= javascript_include_tag "lib/prototype", "lib/scriptaculous", "lib/builder", "lib/dragdrop", "lib/cropper"%>
3 头像上传略,上传完毕后跳转到头像编辑页面
<% form_for @photo, :method => :put do |f| -%> <input type="hidden" name="x1" id="x1" /> <input type="hidden" name="y1" id="y1" /> <input type="hidden" name="width" id="width" /> <input type="hidden" name="height" id="height" /> <p> <img alt="photo" src="<%= @photo.public_filename(:medium) %>" id="photo" /> </p> <div id="preview"></div><br /> <input type="submit" value="保存头像" /> <input type="button" value="重新上传" onclick="javascript:location.href='/photos/new'" w /> <% end %> <script type="text/javascript" charset="utf-8"> function onEndCrop( coords, dimensions ) { $( 'x1' ).value = coords.x1; $( 'y1' ).value = coords.y1; $( 'width' ).value = dimensions.width; $( 'height' ).value = dimensions.height; } Event.observe( window, 'load', function() { new Cropper.ImgWithPreview( 'photo', { minWidth: 100, minHeight: 100, ratioDim: { x:100, y: 100 }, displayOnInit: true, onEndCrop: onEndCrop, previewWrap: 'preview' } ) } ); </script>
def update @photo = Photo.find params[:id] img = Magick::Image::read(File.expand_path(RAILS_ROOT)+"/public/"+@photo.public_filename(:medium)).first img.crop!(::Magick::CenterGravity, params[:x1].to_i, params[:y1].to_i, params[:width].to_i, params[:height].to_i, true) img.write File.expand_path(RAILS_ROOT)+"/public/"+@photo.public_filename(:thumb) redirect_to photo_path(@photo) end
评论
5 楼
yangzhihuan
2010-02-12
javascript-image-cropper-ui官方网站上提供下载的1.2.1版本在IE8下不能正常工作,后来我用官方网站的demo上的js文件,则在IE8下正常工作.这事情郁闷了我好几天.
4 楼
Hooopo
2009-11-27
rainchen 写道
jquery的用户话(比如在下),可以尝试用imgareaselect 配合本教程使用: http://odyniec.net/projects/imgareaselect/
Plugin features:
Highly configurable
Customizable with CSS styling
Handles scaled images
Keyboard support for moving and resizing the selection
Supports callback functions
Provides API functions for easier integration with other application components
Lightweight — the packed version is less than 8KB
路过完毕
Plugin features:
Highly configurable
Customizable with CSS styling
Handles scaled images
Keyboard support for moving and resizing the selection
Supports callback functions
Provides API functions for easier integration with other application components
Lightweight — the packed version is less than 8KB
路过完毕
不错。。。正找呢!!发现豆瓣用的也是这个Jquery的imgAreaSelect插件
3 楼
机器人
2009-08-17
很好用的东东,太爽了,我还想知道 有没有相关类似的js处理图片的库,比如给图片加水印,我要在页面上移动文字(要加的水印),然后这个js可以像帖子中的那样传隐藏的文字在位置中的表单参数到server.
2 楼
derk
2009-08-17
http://blog.6thdensity.net/2009/02/05/reprocessing-attachment_fu-images-with-rmagick/
1 楼
rainchen
2009-08-03
jquery的用户话(比如在下),可以尝试用imgareaselect 配合本教程使用: http://odyniec.net/projects/imgareaselect/
Plugin features:
Highly configurable
Customizable with CSS styling
Handles scaled images
Keyboard support for moving and resizing the selection
Supports callback functions
Provides API functions for easier integration with other application components
Lightweight — the packed version is less than 8KB
路过完毕
Plugin features:
Highly configurable
Customizable with CSS styling
Handles scaled images
Keyboard support for moving and resizing the selection
Supports callback functions
Provides API functions for easier integration with other application components
Lightweight — the packed version is less than 8KB
路过完毕
发表评论
-
创建你自己的rails generator
2010-01-27 15:01 1223在多个rails项目中,有时需要共享一些公用的componen ... -
rspec实践一(从零开始)
2009-12-25 12:52 1381关于利用rspec的文章感 ... -
简简单单在rails中做定时任务
2009-07-27 19:58 3394在平时的开发过程中,经常会遇到一些定时任务的需求 ... -
用restful_authentication和role_requirement搭建验证授权系统
2008-09-30 21:20 1563转自 http://fanix.iteye.com/blog/ ... -
Rails中html_escape和sanitize
2008-09-26 13:33 2562转自:http://blackanger.blog.51cto ... -
Rails简洁的模板系统Malline
2008-09-14 15:25 1410前段时间听说ra ... -
在rails中优雅的进行模型校验
2008-09-07 20:53 2194在用rails进行开发时,最常见的操作的是前台提交 ... -
win+apache+mongrel下部署ROR
2008-09-01 20:16 1141gem install mongrel #选择最 ... -
Ruby中使用Memecached
2008-09-01 20:03 1303sudo apt-get install memcached ... -
在rails中使用memcached
2008-09-01 20:00 1131libeven memcached的使用需要li ... -
在Ruby中设计Callback机制
2008-08-31 21:11 1944阅读Paperclip源码,发现里面有一个不错的callbac ... -
我怎么就觉得rails适合做大型应用
2008-08-25 13:24 3520之前读了不少 ... -
像操作ActiveRecord一样操作XML
2008-08-10 18:05 1273在开发RESTful应用或者实现多个应用系统交互时 ... -
ImageMagick/Rmagick 安装的那些事儿
2008-08-05 12:54 1175windows平台×××××××××××××××××××××× ... -
让google来为rails画图表
2008-07-26 17:05 1371去年年底的时候,所做的一个rails项目涉及到图表 ... -
10分钟给一个rails遗留系统添加标签功能
2008-07-19 10:18 995早些时候做过了一个rails系统,当时没有涉及到标签的功 ... -
让rails处理图片再简单一点
2008-07-14 18:25 3065先来看看rails处理图片的过程吧,用户上传图片, ... -
分享一款word风格的rails在线编辑器
2008-07-09 16:51 1510在线编辑器是web应用中最常见的东西了,关于它的作用 ... -
让rails处理图片再简单一点
2008-07-07 12:50 1113先来看看rails处理图片的过程吧,用户上传图片, ... -
利用rails轻松建立个性化主页门户
2008-07-04 12:10 1124简单来说,个性化主页就是结合了各种小模块和网络信息 ...
相关推荐
Android-Android-Image-Cropper.zip,适用于Android的图像裁剪库,针对相机/多媒体资料进行了优化。,安卓系统是谷歌在2008年设计和制造的。操作系统主要写在爪哇,C和C 的核心组件。它是在linux内核之上构建的,具有...
什么是multiple-image-directory-cropper Multiple-image-directory-cropper 将多个图像目录转换为较小的图像目录。 它创建整个目录结构的副本并创建所需大小的原始图像的副本。 示例:原始目录:|imagesdir(共 5 ...
React图像文件裁剪器它为您提供了一个按钮,可根据需要使用图像预览和裁切器上传文件作为React组件文件安装通过安装npm install --save react-image-file-cropper 您的项目中需要cropper.css ,也可以直接使用此样式...
Angular图像裁剪器 安装npm install ngx-image-cropper --save 升级说明有关重大更改和更新说明的列表,请访问。用法示例将ImageCropperModule添加到将使用Image Cropper的模块的导入中。 import { NgModule } from ...
npm i -S react-native-image-cropper 要么 yarn add react-native-image-cropper 要求 gl-react您需要安装gl-react。 npm i -S gl-react gl-react-native您需要安装gl-react-native并在RN中链接存储库。 npm i -S ...
Usage 克隆至本地处理 git clone https://github.com/we-plugin/we-cropper.git npm方式引入 npm install we-cropper --save
"image-cropper"可能是一个JavaScript库,因为常见的Web开发中,前端经常使用JavaScript来实现交互式的图像裁剪功能。JavaScript库如Cropper.js、JQuery Cropper等提供了简单易用的API,可以方便地在网页上实现图像...
本话题主要围绕"imagecropper修改版.rar"这个压缩包文件展开,它是一个基于`image-cropper`组件进行二次封装的组件。我们来详细探讨一下这个组件以及与之相关的知识点。 `image-cropper`是一个流行的小程序图片裁剪...
angular-image-cropper, 用于裁剪图像的AngularJS指令 Angular 图像 cropper实时示例要查看一个实时示例,请转到演示文档的页面。描述Angular 图像 cropper inspired受欢迎的裁剪jQuery插件,允许收费 缩放或者旋转...
该组件取决于react-native-image-rotate和@react-native-community/image-editor库。 它们需要先安装并链接到您的项目。 安装步骤: 1. * npm install --save react-native-image-rotate @react-native-community/...
uni-gmy-img-cropper.vue
旨在与React Native Document Scanner一起使用安装 :rocket: :rocket: $ npm install react-native-perspective-image-cropper --save $ react-native link react-native-perspective-image-cropper 该库使用react-...
你需要从官方仓库或者通过npm获取源代码,解压后将`angular-img-cropper-master`文件夹放入项目的`src`或`app`目录。然后,在项目中引入所需的JavaScript和CSS文件,通常包括`angular-img-cropper.js`和`angular-img...
在`wx-cropper-master`这个压缩包中,通常包含了完整的源代码、示例以及相关的文档,可以帮助开发者快速理解和使用这个工具。在实际开发中,应仔细阅读文档,理解每个API的功能和用法,以充分发挥`wx-cropper`的优势...
《Android 图片裁剪框架ArthurHub/Android-Image-Cropper深度解析》 在移动应用开发中,图片处理是一项常见的需求,特别是在社交、摄影类应用中,用户往往需要对选取的照片进行裁剪以满足特定的展示或上传要求。...
基于taro的高性能图片裁剪组件支持移动支持旋转支持缩放可导出绘制的图片的本地地址使用下载代码赋值src/components/ImageCropper 下的文件到你的项目中引入import ImageCropper from "@/components/ImageCropper...
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何...
使用 vue-cropper + vue3 + typescript + element-plus 1. 主要组件 vue-cropper 2. ui组件基于element-plus 3. 开发框架 基于vue 3.2
vue-upload-cropper结合 element-ui upload + vue-cropper 进行图片初始化渲染,图片上传裁剪的封装DemoNotices使用条件:使用 elementUI编译环境安装并配置 babel-plugin-transform-vue-jsx,babel-plugin-syntax-...