jquery图片裁剪上传
① 如何在图片上传前用js(jquery)判断图片的尺寸
创建img标签：
IE浏览器直接src=图片本地路径，然后可以获取这个img的尺寸。
其他浏览器使用HTML5的FileReader获取文件资源转化为base64写入img的src，然后可以获取这个img尺寸。
② 如何使用HTML5实现拍照上传应用
在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器。
1、 视频流
HTML5 The Media Capture
API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标
签，并将从摄像头获得视频作为这个标签的输入来源（请注意目前仅Chrome和Opera支持getUserMedia。补充：请使用Opera支持HTML5的新版本，如果是Chrome，版本需为Chrome 18.0.1008+，并使用about:flags来开启WebRTC，请看下图）。
[html] view plain
<video id="video" autoplay=""></video>
<script>
var video_element = document.getElementById('video');
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
navigator.getUserMedia('video',success, error);
}
function success(stream) {
video_element.src =stream;
}
</script>
视频流
2、 拍照
拍照功能，我们采用HTML5的Canvas实时捕获Video标签的内容，Video元素能作为Canvas图像的输入，这一点很棒。主要代码如下：
[html] view plain
<script>
var canvas =document.createElement('canvas');
var ctx = canvas.getContext('2d');
var cw = vw;
var ch = vh;
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, cw, ch);
ctx.drawImage(video_element, 0, 0, vvw,vvh, 0,0, vw,vh);
document.body.append(canvas);
</script>
3、 图片获取
下面我们要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
[html] view plain
var imgData =canvas.toDataURL("image/png");
因为真正图像数据是base64编码逗号之后的部分，所以我们实际服务器处理的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
[html] view plain
var data = imgData.substr(22);
如果要在上传前获取图片的大小，可以使用：
[html] view plain
var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding
第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串。例如php里：
[html] view plain
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时：
[html] view plain
$.post('upload.php',{ 'data' : data } );
在后台我们用PHP脚本接收数据并存储为图片。
[html] view plain
function convert_data($data){
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
save_to_file($image);
}
function save_to_file($image){
$fp = fopen($filename, 'w');
fwrite($fp, $image);
fclose($fp);
}
请注意，以上的解决方案不仅能用于Web App拍照上传，并且你可以实现把Canvas的输出转换为图片上传的功能。这样你可以使用Canvas为用户提供图片编辑，例如裁剪、上色、涂鸦的画板功能，然后把用户编辑完的图片保存到服务器上。
Canvas涂鸦功能
在HTML5的驱动下，Web App与Native App之间是否还有不可逾越的鸿沟？我将会在3月23日网络开发者大会上现场来解答这个问题，敬请期待。
③ 有谁知道ps里的存储为web所用格式能退出了
一、PS图片默认存储的格式为PSD，不过我们可以在资源管理器下方进行不同的格式选择；
二、下面来系统介绍一下ps软件的文件保存格式；
1、PSD格式：PSD格式是Photoshop默认的文件格式，它可以保留文档中的所有图层、蒙版、通道、路径、未栅格化的文字、图层样式等。通常情况下，我们都是将文件保存为PSD格式，方便以后可以随时修改；
2、PSB格式： PSB格式是Photoshop的大型文档格式，可支持高达到3000000像素的超大图像文件。它支持Photoshop所有的功能，可以保持图像中的通道、图层样式和滤镜效果不变，但只能在Photoshop中打开。如果创建一个2GB以上的PSD文件，可以使用该格式；
3、BMP格式： BMP是一种用于Windows操作系统的图像格式，主要用于保存文图文件。该格式可以处理24位颜色的通道，支持RGB、位图、灰度和索引模式，但不支持Alpha通道；GIF格式：（动图） GIF是基于在网络上传输图像而创建的文件格式，它支持透明背景的动画，被广泛的应用在网络文档中。GIF格式采用LZW无损压缩方式，压缩效果较好；
4、Dicom格式： Dicom（医学数字成像和通信）格式通常用于传输和存储医学图像，如超声波和扫描图像。Dicom文件包含图像数据和标头，其中存储了有关病人和医学图像的信息；EPS格式： EPS是为PostScript打印机上输出图像而开发的文件格式，几乎所有的图形、图表和页面排版程序都支持该格式。EPS格式可以同时包含矢量图形和位图图像。支持RGB、CMYK、位图、双色调、灰度、索引和Lab模式，但支持Alpha通道；
5、JPEG格式： JPEG是由联合图像专家组开发的文件格式。它采用有损压缩方式，具有较好的压缩效果，但是将压缩品质数值设置得较大时，会损失掉图像的某些细节。JPEG格式支持RGB、CMYK和灰度模式，不支持Alpha通道；
6、PCX格式： PCX格式采用RLE无损压缩方式，支持24位、256色的图像，适合保存索引和线画稿模式的图像。该格式支持RGB、索引、灰度和位图模式，以及一个颜色通道；PDF格式： PDF格式（便携文档格式）是一种通用的文件格式，支持矢量数据和位图数据，具有电子文档搜索和导航功能，是Adobe illustrator和Adobe Acrobat的主要格式。PDF格式支持RGB、CMYK、索引、灰度、位图和Lab模式，不支持Alpha通道；