jQueryh插件imgareaselect

【jQueryh插件imgareaselect】的更多相关文章

jQueryh插件imgareaselect

1.插件介绍 imgareaselect 是一个允许用户使用简单.直观的点击.拖动界面图像选择矩形区域的jQuery插件.该插件可用于 web 应用程序中轻松实现图像裁剪功能,以及其他功能,如照片标记. 图像编辑功能,等等.2.基本用法(简单实例) 首先先调用imgareaselect-default.css.jquery-1.7.1.min.js.imgareaselect.pack.js这三个文件(官网下载的) 官网:http://odyniec.net/projects/imgareas…

jQuery插件ImgAreaSelect 实例讲解一（头像上传预览和裁剪功能）

上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入)  <link rel="stylesheet" type=&qu…

关于jQuery插件imgAreaSelect基础讲解

关于ImgAreaSelect, 是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳.图片编辑等~~来具体看一下 1.先下载imgAreaSelect插件下载地址: 英文:http://odyniec.net/projects/imgareaselect/ 中文:http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html 在头部引用: <link rel="styl…

jQuery插件ImgAreaSelect 实例讲解二

在上一篇随笔http://www.cnblogs.com/chenguanai/p/6883401.html中,已经了解了头像的上传预览和裁剪功能:那么这次就再看一下imgareaselect的裁剪功能~~~ 有时候,我们裁剪某一区域时,分别会有大中小三个头像显示着~~~也就是如下图所示,当在右边的原图选择时,左边会分别显示大中小三个头像,便于用户选择~~~ 第一步:先引入插件和js包 <link rel="stylesheet" type="text/css"…

JQ插件之imgAreaSelect实现对图片的在线截图功能（java版）

前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下: 一.flash用户上传头像组件 ,地址: http://www.hdfu.net/index.html (但收费) 二.jq插件imgAreaSelect, 地址:http://odyniec.net/projects/imgareaselect/ 注:官网文档为英文的,如果想看中文的这里也有,h…

Java+jquery实现裁剪图片上传到服务器

大体分两步: 1.利用jquery裁剪图片,把裁剪到的几个点传入后端 2.利用前端传入的几个点,来裁剪图片首先,用到一个jquery的插件 imgAreaSelect 实例及插件下载地址:http://odyniec.net/projects/imgareaselect/ 引入插件: <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" /&…

ASP.NET MVC 网站开发总结（三） ——图片截图上传

本着简洁直接,我们就直奔主题吧,这里需要使用到一个网页在线截图插件imgareaselect(请自行下载). 前台页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/imgareaselect-default.css" /> </head> <…

JavaScript实现本地图片上传预览功能（兼容IE、chrome、FF）

需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼容.代码实现主要利用到jquery插件imgAreaSelect,FileReader对象(chrome和ff获取本地图片数据的接口),IE滤镜效果. 关键词:imgAreaSelect FileReaderdocument.selection.createRange() IE滤镜效果一.实现上传…

jQuery 图片剪裁插件使用之 imgAreaSelect

插件主页:http://odyniec.net/projects/imgareaselect/ 官方网站上说明支持的浏览器:The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+. 插件的主要功能包括: 1. 可以选取固定比例或任意比例的选区 2. 可以设置选区的长宽最大最小限值 3. 可以设默认显示…

利用jquery的imgAreaSelect插件实现图片裁剪示例

http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现这个在以前来说非常棘手的功能.我们来看看它的实现步骤: 1.包含进CSS文件(imgareaselect-default.css)和 jquery.imgareaselect.js文件 2.html代码(要裁剪的图片元…