jquery imgAeraSelect插件地址:http://odyniec.net/projects/imgareaselect/
原理很简单,就是将鼠标框住的区域两个定点坐标值传回服务器端,在服务器端用image magick处理。
由于rmagick存在内存泄露问题。这里选择了mini_magick。mini_magick是一个非常小的库,源代码不过300行。主要是通过调用系统命令行来处理图片。只要系统安装了image magick就可以。
view:主要是加四个隐藏域来传递裁剪区域。在form提交时候一起传递到服务器。
- <input id="x1" type="hidden" value="0" name="x1"/>
-
<input id="y1" type="hidden" value="0" name="y1"/>
-
<input id="x2" type="hidden" value="150" name="x2"/>
-
<input id="y2" type="hidden" value="150" name="y2"/>
<input id="x1" type="hidden" value="0" name="x1"/>
<input id="y1" type="hidden" value="0" name="y1"/>
<input id="x2" type="hidden" value="150" name="x2"/>
<input id="y2" type="hidden" value="150" name="y2"/>
初始化裁剪框在待处理图片的中央和一些验证:
-
-
-
<script type="text/javascript">
-
$(document).ready(function(){
-
var pos = initValue();
-
-
-
$('#avatar').imgAreaSelect({aspectRatio: '1:1',
- x1: pos.x1,
- y1: pos.y1,
- x2: pos.x2,
- y2: pos.y2,
-
handles: true,
-
-
onSelectEnd: function (img, selection) {
-
$('input[name=x1]').val(selection.x1);
-
$('input[name=y1]').val(selection.y1);
-
$('input[name=x2]').val(selection.x2);
-
$('input[name=y2]').val(selection.y2);
- }
- });
- });
-
-
function initValue(){
-
var o = new Object();
-
var x = $("#avatar").width();
-
var y = $("#avatar").height();
-
var size = x >= y ? y : x;
- size = size >= 100 ? 100 : size;
- o.x1 = (x - size) / 2;
- o.y1 = (y - size) / 2;
- o.x2 = o.x1 + size;
- o.y2 = o.y1 + size;
-
return o;
- }
-
-
-
-
function checkImage(){
-
var image_name = $("#photo").val();
-
var reg = /\.png|jpeg|jpg|bmp|gif$/i
-
if (reg.test(image_name)){
-
return true;
-
}else if(image_name == "") {
-
alert("没有选择图片!");
-
return false;
-
}else{
-
alert("图片格式不正确!");
-
return false;
- }
- }
-
- </script>
<script type="text/javascript">
$(document).ready(function(){
var pos = initValue();
$('#avatar').imgAreaSelect({aspectRatio: '1:1',
x1: pos.x1,
y1: pos.y1,
x2: pos.x2,
y2: pos.y2,
handles: true,
onSelectEnd: function (img, selection) {
$('input[name=x1]').val(selection.x1);
$('input[name=y1]').val(selection.y1);
$('input[name=x2]').val(selection.x2);
$('input[name=y2]').val(selection.y2);
}
});
});
function initValue(){
var o = new Object();
var x = $("#avatar").width();
var y = $("#avatar").height();
var size = x >= y ? y : x;
size = size >= 100 ? 100 : size;
o.x1 = (x - size) / 2;
o.y1 = (y - size) / 2;
o.x2 = o.x1 + size;
o.y2 = o.y1 + size;
return o;
}
function checkImage(){
var image_name = $("#photo").val();
var reg = /\.png|jpeg|jpg|bmp|gif$/i
if (reg.test(image_name)){
return true;
}else if(image_name == "") {
alert("没有选择图片!");
return false;
}else{
alert("图片格式不正确!");
return false;
}
}
</script>
后台处理,主要就是做以下几件事情:
1.把上传来的照片压缩到200x200
2.通过content-type判断图片是否合法。以防用户自己改扩展名。
3.把gif和png格式转换成jpg,不然在裁剪时候后出问题。
4.裁剪
5.把裁剪后图片缩放成几种比例
-
-
def upload_avatar
-
if request.post?
-
avatar_200_200 = RAILS_ROOT + "/public/files/avatar/200_200/"
-
photo_name = "#{current_user.hash_id}.jpg"
-
-
avatar_100_100 = RAILS_ROOT + "/public/files/avatar/100_100/"
-
avatar_64_64 = RAILS_ROOT + "/public/files/avatar/64_64/"
-
avatar_50_50 = RAILS_ROOT + "/public/files/avatar/50_50/"
-
avatar_40_40 = RAILS_ROOT + "/public/files/avatar/40_40/"
-
-
-
if params[:commit] == "上传照片"
-
-
-
-
photo = params[:photo]
-
-
raise "image type Error!" if photo.content_type !~ /^image\/.*?jpeg|jpg|png|bmp|gif$/i
-
Dir.chdir avatar_200_200
-
- img = MiniMagick::Image.from_blob(photo.read)
-
img.format("jpg") if photo.content_type =~ /gif|png$/i
-
-
img.resize "200x200"
- img.write photo_name
-
- redirect_to request.referer
-
elsif params[:commit] == "保存设置"
-
-
-
Dir.chdir avatar_200_200
-
if File.exist?(photo_name)
-
width = params[:x2].to_i - params[:x1].to_i
-
height= params[:y2].to_i - params[:y1].to_i
-
- img = MiniMagick::Image.open(photo_name)
-
-
img.crop "#{width}x#{height}+#{params[:x1]}+#{params[:y1]}"
-
-
img.resize 100 and Dir.chdir avatar_100_100 and img.write photo_name
-
img.resize 64 and Dir.chdir avatar_64_64 and img.write photo_name
-
img.resize 50 and Dir.chdir avatar_50_50 and img.write photo_name
-
img.resize 40 and Dir.chdir avatar_40_40 and img.write photo_name
-
end
-
end
-
end
-
end
def upload_avatar
if request.post?
avatar_200_200 = RAILS_ROOT + "/public/files/avatar/200_200/"
photo_name = "#{current_user.hash_id}.jpg"
avatar_100_100 = RAILS_ROOT + "/public/files/avatar/100_100/"
avatar_64_64 = RAILS_ROOT + "/public/files/avatar/64_64/"
avatar_50_50 = RAILS_ROOT + "/public/files/avatar/50_50/"
avatar_40_40 = RAILS_ROOT + "/public/files/avatar/40_40/"
if params[:commit] == "上传照片"
#TODO Validate Image Size!
#TODO 增加白色背景,以防不规则图片!
photo = params[:photo]
raise "image type Error!" if photo.content_type !~ /^image\/.*?jpeg|jpg|png|bmp|gif$/i
Dir.chdir avatar_200_200
img = MiniMagick::Image.from_blob(photo.read)
img.format("jpg") if photo.content_type =~ /gif|png$/i
img.resize "200x200"
img.write photo_name
redirect_to request.referer
elsif params[:commit] == "保存设置"
Dir.chdir avatar_200_200
if File.exist?(photo_name)
width = params[:x2].to_i - params[:x1].to_i
height= params[:y2].to_i - params[:y1].to_i
img = MiniMagick::Image.open(photo_name)
img.crop "#{width}x#{height}+#{params[:x1]}+#{params[:y1]}"
img.resize 100 and Dir.chdir avatar_100_100 and img.write photo_name
img.resize 64 and Dir.chdir avatar_64_64 and img.write photo_name
img.resize 50 and Dir.chdir avatar_50_50 and img.write photo_name
img.resize 40 and Dir.chdir avatar_40_40 and img.write photo_name
end
end
end
end
效果预览:
来源:http://www.iteye.com/topic/541141
分享到:
相关推荐
gem 'mini_magick' ``` 然后运行`bundle install`来安装MiniMagick。 **使用MiniMagick处理图像** MiniMagick的核心操作是`read`、`write`和`process`方法。`read`用于加载图像,`write`用于保存修改后的图像,而`...
使用它添加到您的Gemfile gem 'mojo_magick'在您的ruby代码中要求它require 'mojo_magick'去镇上! 查看几个简单的例子图像调整大小获取图像的大小(假设图像为“ 120wx222h”) dimensions = MojoMagick::get_image...
该自述文件通常会记录启动和运行应用程序所需的所有步骤。 您可能要讲的内容: Ruby版本 系统依赖 配置 数据库创建 数据库初始化 如何运行测试套件 服务(作业队列,缓存服务器,搜索引擎等) 部署说明 … 如果...
这个库,名为“Magick Neversis”,是专门用于图像处理和操作的工具集,它为开发人员提供了一种高效、灵活的方式来处理各种图像格式和执行复杂的图像操作。 Magick,源自ImageMagick,是一个广泛使用的开源图像处理...
gem 'simple_magick' 然后执行: $ bundle 支持的版本 Ruby 2.0.0 或更高版本 用法 require 'simple_magick' if SimpleMagick . imagemagick_installed? image = SimpleMagick :: Image . new ( '/path/to/src_...
例子# Import thingsfrom breakpoint_magick import GetVSCodeBreakpoints# Get a list with VS Code breakpointsbreak_point_list = GetVSCodeBreakpoints ()# Example of processing to new formatprint ( "# ...
gem 'dummy_magick' end 然后执行: $ bundle 用法 ## # Generate a dummy image file # # @param width [Integer] The width of the image. # @param height [Integer] The height of the image. # @param ...
在IT领域,图片处理是一项常见的任务,而"Magick++实现图片压缩"的主题涉及到了图像处理库Magick++的应用,特别是在图像压缩和锐化方面的技术。Magick++是ImageMagick库的一部分,它提供了一个C++接口来处理各种图像...
Magick.NET是一个强大的开源类库,专为.NET平台设计,用于处理和操作图像。这个类库使得.NET开发者能够轻松地进行各种复杂的图像处理任务,包括转换、裁剪、旋转、调整大小、添加特效以及应用滤镜等。Magick.NET不仅...
Magick++ 提供了非常丰富的方法来操作图像,例如调整图像大小、裁剪、旋转、改变图像的对比度和亮度、应用滤镜效果、添加文本和图像水印等等。此外,Magick++ 还支持许多图像格式的读取和写入,这使其成为一个非常...
【标题】"Magick 图片处理"涉及到的核心技术是ImageMagick,这是一款开源的跨平台图像处理工具,用于在命令行中进行各种图像操作,包括但不限于图片转换、编辑、合成以及添加水印等。ImageMagick的强大功能使得它在...
Magick.NET库是基于ImageMagick开源项目构建的,ImageMagick是一个广泛使用的命令行工具集,而Magick.NET则将其功能无缝集成到.NET环境中。 **主要特性:** 1. **多格式支持**:Magick.NET 支持众多图像文件格式,...
linux下采用开源库Magick++实现图片合成,图片添加中英文字体:需要自己下载编译Magick++,如下为部分代码,下载可看完整代码 #include <Magick++.h> #include <Magick++/Image.h> #include <Magick++/Drawable.h> ...
- **Web 应用**:Web 服务器可以利用 Magick++ 实时生成图表、图形和注释图片等动态内容。 - **移动应用**:开发人员可以使用 Magick++ 来处理用户上传的照片,实现滤镜效果、尺寸调整等功能。 - **自动化工具**:...
这个库允许开发者在C#环境中轻松地执行复杂的图像操作,如转换、裁剪、调整大小、添加滤镜、读取和写入元数据等。它基于ImageMagick,一个广泛使用的跨平台开源图像处理工具。 Magick.NET 的核心类是 `MagickImage`...
检查系统上是否安装了上述gem $ gem list #安装要将valor-dual安装到系统中,请运行$ sudo gem install valor-dual #用法首先,在您的项目中需要mini_magick,aws-sdk,uri gem和YAML。 require "mini_magick...
rtesseract, 用于超立方体识别的ruby 库 rtesseract 用于超立方体识别的ruby 库。要求:要正常工作,需要使用 rtesseract:超正方体- 程序ImageMagick - 程序RMagick或者 mini_magick -
将administrate-field-active_storage和mini_magick到您的Gemfile中(第6条): gem 'administrate-field-active_storage' gem "image_processing" 对于rails 5.x,请使用以下命令 gem 'administrate-f
Magick.NET是一个开源的图像处理库,基于ImageMagick项目,允许开发者在C#环境中轻松地处理图像。"Q8"代表了该版本使用的是8位颜色深度,意味着它可以处理256种颜色级别的图像,适合大多数日常应用场景。"AnyCPU"则...
Magick.NET将其功能带入.NET世界,为C#和.NET Framework开发者提供了丰富的API,用于执行复杂的图像操作,如裁剪、缩放、旋转、颜色调整以及各种特效添加。 二、源码分析 1. 图片签名:在图像处理领域,签名通常指...