html5图片裁剪上传
❶ 你好，我用webuploader.html5only.min.js实现批量图片上传，我该怎么在action中获取上传的那些文件呢
1.1 分片、并发
分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
1.2 预览、压缩
支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。
解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。
1.3 多途径添加文件
支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。
粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。
1.4 HTML5 & FLASH
兼容主流浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。
同时Flash部分没有做任何UI相关的工作，方便不关心flash的用户扩展和自定义业务需求。
1.5 MD5秒传
当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。
如果服务端与前端统一修改算法，取段md5，可大大提升验证性能，耗时在20ms左右。
1.6 易扩展、可拆分
采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。
采用AMD规范组织代码，清晰明了，方便高级玩家扩展。
2、引入资源
2.1 下载包内容
├── Uploader.swf // SWF文件，当使用Flash运行时需要引入。
├── webuploader.js // 完全版本。
├── webuploader.min.js // min版本
├── webuploader.flashonly.js // 只有Flash实现的版本。
├── webuploader.flashonly.min.js // min版本
├── webuploader.html5only.js // 只有Html5实现的版本。
├── webuploader.html5only.min.js // min版本
├── webuploader.withoutimage.js // 去除图片处理的版本，包括HTML5和FLASH.
└── webuploader.withoutimage.min.js // min版本
2.2 或者直接使用由staticfile提供的cdn版本，或者下载Git项目包。
// SWF文件，当使用Flash运行时需要引入。
├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf
// 完全版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js
// 只有Flash实现的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js
// 只有Html5实现的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js
// 去除图片处理的版本，包括HTML5和FLASH.
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js
└── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js
2.3 DIY打包
WebUploader文件打包借助了Grunt工具来实现
2.3.1 环境依赖
1.git命令行工具
2.node & npm命令行工具
3.grunt (npm install grunt-cli -g)
2.3.2 编译代码
1.克隆 webuploader git仓库，git clone https://github.com/fex-team/webuploader.git。
2.安装node依赖，npm install。
3.执行grunt dist，此动作会在dist目录下面创建合并版本的js, 包括通过uglify压缩的min版本。
2.3.3 配置
打开webuploader仓库根目录下面的Gruntfile.js文件, 代码合并有buildtask来完成。找到build配置项。
Gruntfile.js已经配置了一个自定义合并的demo. 打包只支持HTML5的版本
// 自己配置的实例
// glob语法。
custom: {
preset: "custom",
cwd: "src",
src: [
'widgets/**/*.js',
'runtime/html5/**/*.js' ],
dest: "dist/webuploader.custom.js"
}
3、angular指令——<web-uploader>
3.1 指令功能
添加一个上传文件按钮，可以自行配置上传文件的类型和过滤规则，且在弹出的模态框中进行操作，支持连续上传，分类选择上传
3.2 使用说明
这里只是使用说明，可能会加一些注意事项，具体参数或者变量说明请参看后面
3.2.1 页面添加一个指令
<web-uploader class="btn btn-info" type="image" accept="accept">uploader</web-uploader>
3.2.2 配置上传类型和过滤规则
上传类型
type有四种类型，分别为
image：图片
video：音视频
flash：flash
file：办公文档，压缩文件等等
过滤规则
accept有四个对象属性，属性中包含标题、允许文件后缀、允许的mimetype
3.2.3 指令中绑定弹出模态框的事件
web-uploader这个指令中其实只做了一件事，给元素本身绑定弹出模态框的事件，具体上传文件是在模态框中完成的
3.2.4 初始化uploader类，配置相关属性
在模态框控制器中用到了$timeout
$timeout(function(){
//这里是上传配置代码
},0)
因为配置uploader时需要事先准备好dom元素，angular打开模态框是异步而JavaScript是单线程，所以实际上在执行模态框控制器中的代码时，模态框并没有打开，也就是dom并没有加载完成，这会导致WebUploader报a.runningtime is not a function...的错误
3.3 指令详细说明
3.3.1 父级controller中的配置
.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允许上传的类型 图片/音视频/flash/文件
$scope.accept = {
//图片
image: {
title : 'Images',//标题
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允许上传文件的后缀
mimeTypes : 'image/*'//允许的mimetype
},
//音视频
video: {
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
},
//flash
flash: {
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
},
//办公文档，压缩文件等等
file: {
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats- officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms- excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
}
};
}])
3.3.2 指令web-uploader
.directive('webUploader', ['$modal', function($modal){
return{
restrict: 'AE',
scope: {
accept: '=accept'
},
link: function($scope, $element, $attr){
$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
return {
accept: $scope.accept,
type: $attr.type
};
}
}
});
modalInstance.result.then(function(returnStatus){
console.log(returnStatus);
},function(){
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);
❷ html5拖拽图片上传，怎么获得图片原始尺寸
用后台语言去获取不就可以了。为什么一定要在前端来获取图片原始大小呢？即使你要在前端实用，比如php获取到了以后还是可以通过变量传递给前端的。至于PHP怎么获取图片原始大小这个网上很容易找到资料！
❸ 如何使用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为用户提供图片编辑，例如裁剪、上色、涂鸦的画板功能，然后把用户编辑完的图片保存到服务器上。
❹ HTML5 做的移动 web app 怎样实现从本地上传图片
当然可以，不过只能从相册里传
❺ PHP、HTML5上传图片自动压缩问题
给你个图片处理的类吧，图片剪裁处理后，也就等于将图片压缩了。
/**
*图像处理类
*============================================================================
*Copyright2014大秦科技，并保留所有权利。
*网站地址:http://www.qintech.net；
*============================================================================
*/
classImage{
//生成缩略图的方式
public$thumbType;
//缩略图的宽度
public$thumbWidth;
//缩略图的高度
public$thumbHeight;
//生成缩略图文件名后缀
public$thumbEndFix;
//缩略图文件前缀
public$thumbPreFix;
/**
*构造函数
*/
publicfunction__construct(){
$this->thumbType=1;
$this->thumbWidth=120;
$this->thumbHeight=60;
$this->thumbPreFix='';
$this->thumbEndFix='_thumb';
}
/**
*检测是否为图像文件
*@param$img图像
*@returnbool
*/
privatefunctioncheck($img){
$type=array(".jpg",".jpeg",".png",".gif");
$imgType=strtolower(strrchr($img,'.'));
returnextension_loaded('gd')&&file_exists($img)&&in_array($imgType,$type);
}
/**
*获得缩略图的尺寸信息
*@param$imgWidth原图宽度
*@param$imgHeight原图高度
*@param$thumbWidth缩略图宽度
*@param$thumbHeight缩略图的高度
*@param$thumbType处理方式
*1固定宽度高度自增2固定高度宽度自增3固定宽度高度裁切
*4固定高度宽度裁切5缩放最大边原图不裁切
*@returnmixed
*/
privatefunctionthumbSize($imgWidth,$imgHeight,$thumbWidth,$thumbHeight,$thumbType){
//初始化缩略图尺寸
$w=$thumbWidth;
$h=$thumbHeight;
//初始化原图尺寸
$cuthumbWidth=$imgWidth;
$cuthumbHeight=$imgHeight;
switch($thumbType){
case1:
//固定宽度高度自增
$h=$thumbWidth/$imgWidth*$imgHeight;
break;
case2:
//固定高度宽度自增
$w=$thumbHeight/$imgHeight*$imgWidth;
break;
case3:
//固定宽度高度裁切
$cuthumbHeight=$imgWidth/$thumbWidth*$thumbHeight;
break;
case4:
//固定高度宽度裁切
$cuthumbWidth=$imgHeight/$thumbHeight*$thumbWidth;
break;
case5:
//缩放最大边原图不裁切
if(($imgWidth/$thumbWidth)>($imgHeight/$thumbHeight)){
$h=$thumbWidth/$imgWidth*$imgHeight;
}elseif(($imgWidth/$thumbWidth)<($imgHeight/$thumbHeight)){
$w=$thumbHeight/$imgHeight*$imgWidth;
}else{
$w=$thumbWidth;
$h=$thumbHeight;
}
break;
default:
//缩略图尺寸不变，自动裁切图片
if(($imgHeight/$thumbHeight)<($imgWidth/$thumbWidth)){
$cuthumbWidth=$imgHeight/$thumbHeight*$thumbWidth;
}elseif(($imgHeight/$thumbHeight)>($imgWidth/$thumbWidth)){
$cuthumbHeight=$imgWidth/$thumbWidth*$thumbHeight;
}
//}
}
$arr[0]=$w;
$arr[1]=$h;
$arr[2]=$cuthumbWidth;
$arr[3]=$cuthumbHeight;
return$arr;
}
/**
*图片裁切处理
*@param$img原图
*@paramstring$outFile另存文件名
*@paramstring$thumbWidth缩略图宽度
*@paramstring$thumbHeight缩略图高度
*@paramstring$thumbType裁切图片的方式
*1固定宽度高度自增2固定高度宽度自增3固定宽度高度裁切
*4固定高度宽度裁切5缩放最大边原图不裁切6缩略图尺寸不变，自动裁切最大边
*@returnbool|string
*/
publicfunctionthumb($img,$outFile='',$thumbWidth='',$thumbHeight='',$thumbType=''){
if(!$this->check($img)){
returnfalse;
}
//基础配置
$thumbType=$thumbType?$thumbType:$this->thumbType;
$thumbWidth=$thumbWidth?$thumbWidth:$this->thumbWidth;
$thumbHeight=$thumbHeight?$thumbHeight:$this->thumbHeight;
//获得图像信息
$imgInfo=getimagesize($img);
$imgWidth=$imgInfo[0];
$imgHeight=$imgInfo[1];
$imgType=image_type_to_extension($imgInfo[2]);
//获得相关尺寸
$thumb_size=$this->thumbSize($imgWidth,$imgHeight,$thumbWidth,$thumbHeight,$thumbType);
//原始图像资源
$func="imagecreatefrom".substr($imgType,1);
$resImg=$func($img);
//缩略图的资源
if($imgType=='.gif'){
$res_thumb=imagecreate($thumb_size[0],$thumb_size[1]);
$color=imagecolorallocate($res_thumb,255,0,0);
}else{
$res_thumb=imagecreatetruecolor($thumb_size[0],$thumb_size[1]);
imagealphablending($res_thumb,false);//关闭混色
imagesavealpha($res_thumb,true);//储存透明通道
}
//绘制缩略图X
if(function_exists("imageresampled")){
imageresampled($res_thumb,$resImg,0,0,0,0,$thumb_size[0],$thumb_size[1],$thumb_size[2],$thumb_size[3]);
}else{
imageresized($res_thumb,$resImg,0,0,0,0,$thumb_size[0],$thumb_size[1],$thumb_size[2],$thumb_size[3]);
}
//处理透明色
if($imgType=='.gif'){
imagecolortransparent($res_thumb,$color);
}
//配置输出文件名
$imgInfo=pathinfo($img);
$outFile=$outFile?$outFile:dirname($img).'/'.$this->thumbPreFix.$imgInfo['filename'].$this->thumbEndFix.".".$imgInfo['extension'];
Files::create(dirname($outFile));
$func="image".substr($imgType,1);
$func($res_thumb,$outFile);
if(isset($resImg))
imagedestroy($resImg);
if(isset($res_thumb))
imagedestroy($res_thumb);
return$outFile;
}
}
❻ html5+js怎么实现手机头像上传，可裁剪
抱歉
这个已经不属于HTML+JS的内容了。
最常用的是.NET和PHP，这两个都有现成的模版可以下载。
❼ 做一个简易图片编辑器，要求能从本地打开图片，有裁剪功能，用HTML5，jquery和css3,
这里有一个用jquery做的 图片剪切上传的插件 你看下 满足你的需要不
http://www.cnblogs.com/fromearth/archive/2009/05/27/1490833.html
❽ 如何使用HTML5实现拍照上传应用
HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。
1、 视频流
HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用
getUserMedia（请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video
标签，并将从摄像头获得的视频作为这个标签的输入来源。
<video id=”video” autoplay=”"></video>
<script>
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回调函数,当然你也可以直接在此写一个匿名函数
}
function success(stream){
video_element.src=stream;
}
</script>
此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：
var canvas=document.createElement(‘canvas’); //动态创建画布对象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。
document.body.append(canvas);
3、 图片获取
从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
var data=imgData.substr(22);
如果要在上传前获取图片的大小，可以使用：
var length=atob(data).length; //atob 可解码用base-64解码的字串
第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：
$.post(‘upload.php’,{‘data’:data});
在后台我们用PHP脚本接收数据并存储为图片。
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的编辑功能函数提供图片编辑，例如裁剪、上色、涂鸦、圈点等功能，然后把用户编辑完的图片上传保存到服务器上。
在还在不断补充修正的HTML5的驱动下，Web App与Native App之间的距离将越来越小。在可预见的不远的未来，越来越多老的和新的开发项目必将会迁移到WEB应用上来。
相关规范：
The MediaCapture API：http://www.w3.org/TR/media-capture-api/
Canvas：http://dev.w3.org/html5/2dcontext/
❾ 微信上的html5页面是怎么制作出来的
你好，微信上的HTML页面一般是用工具做出来的，很少有开发的H5案列，最常见是翻页H5，自由度比较低，只能修改图片换换位子，而专业工具自由度比较高，可以很灵活的设计H5，epub360在专业工具中上手难度适中，值得大家尝试下。
❿ html5网页背景图手动上传切换代码怎么写
html5网页背景图手动上传切换代码这样写。
1、html5网页背景图手动枣含上传切换代码需要在网页上点击鼠标右键查看网站源代码。
2、找到css里面的背景图这一段代码，查看背绝伏景凳宏笑图路径，通过ftp或者服务器进行替换图片即可。