使用Handy Photo图片编辑器做出更好的照片
腾讯数码讯（编译：韦映伽）由ADVA 软件开发的Handy Photo&，售价为1.99美元（人民币12元）是一款可以同时在和 iPad上使用的功能强大的照片编辑应用。它将帮助用户获得令人惊艳的图片编辑效果。笔者很喜欢用自己的iPhone拍摄照片。即使拍摄的质量可能不如市场上那些花哨的数码单反相机，但笔者仍然青睐这样的拍摄手段，因为这样做并不需要再在身上携带其他设备了。就像众人常说的那样，“最好的相机就是那个可以一直带在身上的。”在很多像Photoshop
for phone和Facetune这样功能强大的照片编辑应用程序不断涌现的今天，是不是其他同类型的应用就没有生存空间了呢？***当然是否定的。现在，就让我们一起迎接Handy Photo吧。Handy Photo拥有非常直观的用户界面，虽然你可能需要花一点时间来习惯它，因为这是一个颇为不同寻常的照片编辑应用。事实上，笔者对Handy Photo那个蓝色和橙色相结合的配色不太满意，怎么能这样配色呢？不过这可能只是因为笔者格外挑剔而已。一旦你习惯了它的界面，Handy Photo就将变得和其他照片应用程序一样易于使用。在应用中，用户们可以从他们的画廊（也就是形容图片库的一个花哨术语）中导入照片，或用相机抓拍新的图像，然后就开始享受编辑的乐趣吧。在Handy Photo的顶部，你会发现一个记录编辑操作历史的工具栏，一个可以用来查看原始图像的按钮，一个用来导航查看你每一次修改内容的按钮和一个帮助按钮。在右上角，用户会见到一个访问Handy Photo的主菜单，也有8个选项：魔术剪裁，色调和色彩，修整，仿制图章，移动我，过滤，纹理，和框架。应用中提供的笔调和颜色正是很多用户所期望的，用户们可以对当前图像中的颜色进行调整，也能调整如自动色阶、亮度、对比度、饱和度等。每个功能都与左下角的选项一一对应，而你可以在屏幕上向左或向右滑动手指以选择并调整强度。该应用里润饰的部分为用户提供了一个套框、画笔和橡皮擦以帮助大家获得更精确的图像，这对于人像的拍摄来说是特别有用的。操作时就像在Photoshop中仿制图章一样：选择源点，同时再戳上其他位置的照片。它的仿制图章也有三个不同的工具供用户选择：经典仿制图章，图案仿制图章和橡皮擦以修复任何错误。Handy Photo中的滤镜里自带超过20个选项，包括红酒，B&W，漂白旁路，交叉处理，灼热，HDR以及更多。纹理是非常有趣的，它能为你的图像添加独特的外观。而画框如果有一些变化也可以为你的图像带来点睛之笔。你甚至可以为画框选择一个颜色，虽然笔者觉得这是个有点讨厌的功能。如果你本人特别有创意的话，你还可以自由地混合、搭配多个滤镜和贴图来创建独特的，新鲜的东西。上述所有的功能，在大多数照片编辑应用程序里都是非常标准的配置，但Handy Photo还确实有两个独特的功能使它从中脱颖而出。它们就是“魔术剪切”和“移动我”这两个功能。魔术剪切能让用户把照片剪切填充进一个小的角落里。这个功能的原理是通过应用程序的一种算法，来确定如何把一张照片填充到新照片的边缘中。这是相当厉害的一个功能，因为它能把你剪切后的的照片自由的缩放大小。“移动我”这个功能可以允许用户通过套框选择来移动图像和优化选中的图像，这样的话你就可以把你选好的图像移动到任意地方，或是移动到其他新的图像中去。这是很容易使用的一个功能，但是要想发挥它的优势最好是使用更加精确的触碰工具，比如手写笔，而不是你的手指。所以如果你需要制作一张自己跳到云端的照片的话，对于Handy Photo来说是件轻而易举的事情。用户可以将编辑好的图像保存到你的相机胶卷中，或通过电子邮件、Facebook和Twitter分享它们。Handy Photo的设置选项让你能选择最大分辨率（高达36万像素，默认为25），而自动隐藏菜单，允许撤销对照片的裁切，也能启用或清除历史记录。笔者发现Handy Photo对于iPhone拍照爱好者来说是一个十分强大的工具，它值得成为你众多应用程序中的一员。笔者对该应用唯一的希望是在未来看到图片在其中能以更清晰的方式进行保存，打开或访问设置，因为笔者在使用时花了几分钟才意识到它们只会显示在自己所访问的菜单右上角。这样的东西在笔者看来应该是可以在任何时候都能轻易访问的。希望开发人员能在即将到来的新版本中给用户们提供一个更精简的菜单和导航。笔者推荐大家使用Handy Photo，特别是它拥有“魔术剪切”和“移动我”这两个很棒的功能。再加上它是一个可以让你在iPhone和iPad中都能使用的工具，这一切都值得你为它在App Store里花费12元人民币。 来源：
[责任编辑：raymin]
还能输入140字
还能输入140字
Copyright & 1998 - 2017 Tencent. All Rights Reserved用CSS和JS打造一个简单的图片编辑器
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
原文来自： /post/build-a-simple-image-editor-with-css-js
本文主要是利用CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器，包括对图片的透明度，黑白，图片亮度等调节。
我们这篇文章来探讨filter和一些简单的js代码。
filter 用法简介
首先来说明一下 filter ，在CSS里面要实现 filter ，其实很简单，使用类似下面的声明方式：
.example {
filter: &filter-function& [&filter-function&];
比如说，我们给图片添加一点 灰度(grayscale) 特效，就可以这样：
.example {
filter: grayscale(90%);
当然，为了浏览器兼容，你最好这样写：
.example {
-webkit-filter: grayscale(90%);
filter: grayscale(90%);
需要注意的是： filter 的属性值的单位通常可能是从0到1之间，但是有些不是这样的，比如 blur 是使用像素'px'来作为单位的，而 hue-rotate 则使用角度 deg 来作为基本单位；
.example {
filter: blur(10px);
.example-2 {
filter: hue-rotate(90deg);
但是如果每次只能使用一个filter就比较麻烦了，所以CSS提供了更加方便的书写形式，直接并排着写：
.example {
filter: grayscale(0.5) blur(10px);
这样就可以实现对一个元素添加多个filter属性。
简单地说完filter之后，我们来动手创建一个简答的图片编辑器。
创建基本的HTML文件
在这里我们创建一个index.html，代码也比较简单：
&!DOCTYPE HTML&
&meta charset="utf-8"&
&title&Image Editor | Vikas Lalwani&/title&
&link href = "css/main.css" type="text/css" rel="stylesheet"&
&div class="wrapper"&
&h1&Image Editor&/h1&
&!--Form for collecting image URL --&
&form id="urlBox" class = "center"&
&input class="url-box" type="url" id="imgUrl" placeholder="Paste any image link and hit enter to start playing."&
&!--Controls for CSS filters via range input--&
&div class="sliders"&
&form id="imageEditor"&
&label for="gs"&Grayscale&/label&
&input id="gs" name="gs" type="range" min=0 max=100 value=0&
&label for="blur"&Blur&/label&
&input id="blur" name="blur" type="range" min=0 max=10 value=0&
&label for="br"&Brightness&/label&
&input id="br" name="br" type="range" min=0 max=200 value=100&
&label for="ct"&Contrast&/label&
&input id="ct" name="ct" type="range" min=0 max=200 value=100&
&label for="huer"&Hue Rotate&/label&
&input id="huer" name="huer" type="range" min=0 max=360 value=0&
&label for="opacity"&Opacity&/label&
&input id="opacity" name="opacity" type="range" min=0 max=100 value=100&
&label for="invert"&Invert&/label&
&input id="invert" name="invert" type="range" min=0 max=100 value=0&
&label for="saturate"&Saturate&/label&
&input id="saturate" name="saturate" type="range" min=0 max=500 value=100&
&label for="sepia"&Sepia&/label&
&input id="sepia" name="sepia" type="range" min=0 max=100 value=0&
&input type="reset" form="imageEditor" id="reset" value="Reset" /&
&!--container where image will be loaded--&
&div id="imageContainer" class="center"&
&img src="images/aviary_heibai.jpg"/&
&script type="text/" src="js/jquery-2.1.0.js"&&/script&
&script type="text/javascript" src="js/main.js"&&/script&
这个文件里，我们引入了main.css和main.js，main.css其实是对编辑器的一些排版起的作用，并没有对图片的filter效果做出实际的影响，我们做的是编辑器，所以在用户改变某个filter的值的时候，我们可以实时让用户看到效果，于是这些实现filter的代码应该就放在main.js里面。
上面的每一个 &form id="imageEditor"& 下面的p元素都是filter的一个属性设置，因为我们可以同时用多个filter来对图片产生特效，所以我每个filter的属性值都设置为可以调节的状态。
上面的 index.html 还要说明的是，我们提供一个输入框，用于给用户输入图片的URL，用户点击回车，我们就将这张图片显示到编辑区域。使用的是下面的简单js代码：
function addImage(e) {
var imgUrl = $("#imgUrl").val();
if (imgUrl.length) {
$("#imageContainer img").attr("src", imgUrl);
e.preventDefault();
//on pressing return, addImage() will be called
$("#urlBox").submit(addImage);
上面的js代码也是写到 main.js 当中。有了可以用户自己添加图片之后，我们就要实现对图片的编辑了：
每次用户在滑动进度条的时候，我们就可以将效果展示给用户看，于是我们来***用户的 change 事件：
$("input[type=range]").change(editImage).mousemove(editImage);
这里加上 mousemove 事件是为了在用户的鼠标离开控制条的时候，将图片的编辑效果也呈现给用户。
编写editImage函数
上面我们将 input[type=range] 的 change 事件交给了 editImage 函数处理，所以，我们来编写一下 editImage 的函数代码：
function editImage() {
var gs = $("#gs").val(); // grayscale
var blur = $("#blur").val(); // blur
var br = $("#br").val(); // brightness
var ct = $("#ct").val(); // contrast
var huer = $("#huer").val(); //hue-rotate
var opacity = $("#opacity").val(); //opacity
var invert = $("#invert").val(); //invert
var saturate = $("#saturate").val(); //saturate
var sepia = $("#sepia").val(); //sepia
$("#imageContainer img").css("filter", 'grayscale(' + gs+
'%) blur(' + blur +
'px) brightness(' + br +
'%) contrast(' + ct +
'%) hue-rotate(' + huer +
'deg) opacity(' + opacity +
'%) invert(' + invert +
'%) saturate(' + saturate +
'%) sepia(' + sepia + '%)');
$("#imageContainer img").css("-webkit-filter", 'grayscale(' + gs+
'%) blur(' + blur +
'px) brightness(' + br +
'%) contrast(' + ct +
'%) hue-rotate(' + huer +
'deg) opacity(' + opacity +
'%) invert(' + invert +
'%) saturate(' + saturate +
'%) sepia(' + sepia + '%)');
其实很简单，我们在每次用户滑动控制条的时候，我们就取得相对应地值，然后通过Jquery的 css() 方法直接为图片加上 filter 效果，而且相信你也看得出来，这个函数的后半段就是实现浏览器兼容的
$("#imageContainer img").css("-webkit-filter",...)
最后，如果你不想将某些特效加到图片上面去，你可以点reset然后将图片重置到原始状态：
$('#imageEditor').on('reset', function () {
setTimeout(function() {
editImage();
chrome打开 index.html ，就可以看到相应的调节效果了。
Happy Hacking
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
阅读(1505)
CodeSecTeam微信公众号
走得再慢，也比站在原地成功。
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net等级:官方中文版298M简体推荐理由:Adobe发布了Photoshop CS6的正式版，在CS6中整合了其Adobe专有的 Mercury图像引擎，通过显卡核心GPU提供了强悍的图片编辑能力。Content-Aware Patch帮助用户更加轻松方便的选取区域，方便用户抠图等操作版本：
等级:4.0.1官方正式版28.4M简体推荐理由:美图秀秀是中国最流行的图片软件，不用学习就会用，比PS简单100倍！美图秀秀2014独有的图片特效、美容、饰品、边框、场景、拼图等功能，加上每天更新的精选素材，可以让你1分钟做出影楼级照片版本：
等级:v4.4.1.304官方版19.1M简体推荐理由:光影魔术手是一个照片画质改善和个性化处理的软件。2014最新版。改善画质、人像美化、胶片效果。加文字加水印。丰富且精美的边框素材,制作个性化相册。批量改尺寸、加水印、加文字及其他批量功能。拼图、涂鸦、场景等更多实用有趣的功能等你发现版本：
等级:v18.0.1.70官方中文版100M简体推荐理由:ACDSee是目前最流行的数字图象处理软件，ACDSee广泛应用于图片的获取、管理、浏览、优化甚至和他人的分享。你可以从数码相机和扫描仪高效获取图片，并进行便捷的查找、组织和预览。超过 50 种常用多媒体格式被一网打尽！版本：
等级:V2.7.2.2001官方版12.4M简体推荐理由:可牛影像是一款完全免费、简单易用的图片处理软件，快速的图片库管理、强大照片美化处理、让您轻松成为数码照片处理专家版本：
等级:1.14.5绿色中文版15.4M多国语言[中文]推荐理由:Hornil StylePix是一款绿色小巧，功能强大的图片编辑软件。Hornil StylePix功能类似Photoshop，但为了更好的速度，Hornil StylePix的设计重点在于轻便版本：
等级:中文版102.7M简体推荐理由:Adobe Fireworks CS5软件可快速建立网站和应用程式介面原型。使用增强的工具组, 以前所未有的快速精确方式为网页建立与最佳化影像版本：
等级:v1.3.3免费中文版16.1M简体推荐理由:sai1.10专业的漫画绘画软件，很多漫画插画大师以及cg达人都用sai来创作漫画，sai勾线方便，具有旋转画布功能，笔刷丰富逼真，笔触直硬，线条绘制功能非常强大版本：
等级:V3.930 官方版10.2M简体推荐理由:iSee个人图片专家是一款综合图像管理软件。iSee数码增强版在iSee个人图片专家的基础上，不但增强了数码后期功能，极大方便了摄影爱好者；还增加了抠图、照片排版、个性化礼品定制等用户期盼已久的新玩意。让您3分钟内成为图片专家，轻松编辑、管理、创作、分享你的照片版本：
等级:X4 SP2 简体中文正式版105M简体推荐理由:CorelDRAW X4 是一款为平面设计用户提供了轻松处理各种项目的工具和资源的图形处理软件，CorelDraw X4相比CorelDraw X3加入了大量新特性，总计有50项以上版本：
等级:v15.1.6594.6M简体推荐理由:ACDSee 15您的图片一站式管理中心，拥有快捷便利的管理功能，简单易用的编辑功能，新增功能——润色功能版本：
等级:14.4.247简体中文版96.9M简体推荐理由:acdsee 14 中文破解版下载，内含注册码，提供照片整理、图片优化等功能，支持100多种文件格式版本：
等级:2.8.3官方中文版(64位)96M简体推荐理由:ViewNX 2是同时适用于静态影像和短片的一体化影像浏览与编辑软件应用程序。它具有更强的操作性，是一个有趣且使用简单的应用程序。viewnx2 64位中文版下载版本：
等级:V6.0 完美绿色版5.2M英文推荐理由:图像处理软件Caricature Photo To Cartoon是一款将相片转换成漫画的工具版本：
等级:2.2 绿色中文版494KB简体推荐理由:图片大小编辑器（绿色版），不用***，方便修改图片的大小版本：
等级:V2.64707KB英文推荐理由:PhotoPad的全称为PhotoPad Photo Editor，它是一个windows下的超轻量级图片编辑器版本：
等级:v1.0.0.1002 免费版2.2M简体推荐理由:可牛淘宝图片助手，可以批量压缩图片尺寸，一键生成适合淘宝店铺的图片；还能批量添加水印、边框，使宝贝图片更加漂亮！版本：
等级:v1.0绿色版2.3M简体推荐理由:图片编辑器是一款图片加字制作工具，使用本图片编辑器可一次添加六种文字，添加文字时不会改变图片原有参数，可对文字进行调整编辑版本：
等级:5.6免费版9.1M英文推荐理由:你可以使PC图像编辑器来自动调节水平和对比度，以及亮度，伽玛值，色调，饱和度和RGB水平。但你也可以上色，均衡和海报的照片，调整阈值，以及适用于各种过滤器，其中包括模糊，锐化，负，噪音，弥漫性，马赛克，跟踪颜色，转动，浮雕，半色调，和其他版本：
等级:v10.10.1汉化版11M简体推荐理由:PhotoFiltre 是一款功能强大、容易上手的图像编辑软件。自带多个图像特效滤镜，使用它们可方便地做出各式各样的图像特效版本：
等级:3.9.2.2绿色中文版342KB简体推荐理由:Tinuous 是一款专门用于图片的批量转换、编辑的软件。转换之初，Tinuous允许你调整图片的输出类型、位深度、亮度、对比度、饱和度和色调等等，并且支持 JPEG 格式的无损转换版本：
等级:v5.1.5中文版11.8M多国语言[中文]推荐理由:Artweaver Plus是一款绘画和编辑软件。Artweaver Plus是一个绘画应用适合初学者，也适合高级用户使用版本：
等级:（图像编辑分析）v1.36免费版2.3M英文推荐理由:Image Analyzer 是一款先进的图像编辑，增强和分析软件。该软件包含图像增强功能，在传统的图像编辑器，加上一些先进的功能版本：
等级:7.1中文版49.9M简体推荐理由:Adobe Camera Raw是一款编辑RAW文件编辑的强大工具。raw是单反数码相机所生成的RAW格式文件。***上Camera Raw插件能在ps中打开编辑RAW格式文件版本：
等级:1.5 绿色版439KB英文推荐理由:DHO Photo-Workshop是一种简单而易于使用的图片编辑工具，您可以把图片编辑好了保存为：tga, *.psd, *.pbm, *.png, *.bmp,等图片格式版本：
等级:v17.0.0.0官方版528KB简体推荐理由:色彩风暴绘画是一个非常小巧的绘图软件，它拥有高性能的绘画程序，还有非常丰富的绘画工具，支持多图层支持，是一个非常适合新手使用的绘图软件。版本：
等级:v4.0.1.13官方版4.8M英文推荐理由:Picture window pro是一款强大的图片编辑工具，可调节图像的色阶、亮度、对比，进行锐化、缩放等操作，几乎具备了photoshop的基础功能，并且提供了50多种照片处理和修饰工具，允许你控制和改变图片的每一个图层版本：
等级:v15.0108G官方版118M简体推荐理由:是一款直接面向三维美工的虚拟现实软件，所有操作都是用美工可以理解的方式（不需要程序员的参与），可以让美工将所有精力投入到效果制作中来，从而有效降低制作成本，提高成果质量。 如果你有良好的3DSMAX的建模和渲染基础，只要对VR-PLATFORM平台加以学习和研究，你就可以很快制作出自己的虚拟现实场景。版本：
等级:V1.0.5.7官方版27.7M简体推荐理由:好图看看是一款轻便、简单的看图软件。好图看看完美兼容所有主流图片格式，支持快速看图、图片编辑，自带大量免费编辑素材，随心所欲零基础美化图片版本：
等级:v4.5.16.23官方版2.7M简体推荐理由:CSRender云渲染平台是是一款效果图渲染软件，支持MAYA,MAX,VUE,V-RAY等软件，拥有分块渲染效果图，渲染小管家，微信绑定，项目管理，一键式提交等特色功能，有需要的赶快下载吧！版本：