正文
html5压缩上传,h5图片压缩上传
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
html怎么压缩上传的图片
程序就比较难了，我们不是每个人都会运用，简单的方法我们也可以做到啊，迅捷图片压缩阮籍N就是挺好用的，额暗沉之后我们用html语言设置图片的高与宽，然后代入图片文件的代码就可以完成了。
相关问答
Q1: Html5移动端上传图片并裁剪 - Clipic.js
Clipic.js插件可以为移动端 (仅支持移动端) 提供头像上传并裁剪成指定尺寸，用原生js开发的，轻量级，包含html跟css，不到8kb。点此链接体验：
参数说明
width:Number (默认：500) – 裁剪宽度
height:Number (默认：500) – 裁剪高度
ratio:Number (可选) – 裁剪的比例，当传入ratio时width/height将无效
src:String (必传) – 需要裁剪的图片，可以是图片链接，或者 base64
type:String (默认：jpeg) – 裁剪后图片的类型，仅支持 jpeg/png 两种
quality:Number (默认：0.9) – 压缩质量
buttonText:Array (默认：[‘取消’, ‘重置’, ‘完成’]) – 底部三个按钮文本
Q2: PHP、HTML5上传图片自动压缩问题
给你个图片处理的类吧，图片剪裁处理后，也就等于将图片压缩了。
/**
* 图像处理类
* ============================================================================
* Copyright 2014 大秦科技，并保留所有权利。
* 网站地址: ；
* ============================================================================
*/
class Image{
//生成缩略图的方式
public $thumbType;
//缩略图的宽度
public $thumbWidth;
//缩略图的高度
public $thumbHeight;
//生成缩略图文件名后缀
public $thumbEndFix;
//缩略图文件前缀
public $thumbPreFix;
/**
* 构造函数
*/
public function __construct(){
$this-thumbType = 1;
$this-thumbWidth = 120;
$this-thumbHeight = 60;
$this-thumbPreFix ='';
$this-thumbEndFix = '_thumb';
}
/**
* 检测是否为图像文件
* @param $img 图像
* @return bool
*/
private function check($img){
$type = array(".jpg", ".jpeg", ".png", ".gif");
$imgType = strtolower(strrchr($img, '.'));
return extension_loaded('gd') file_exists($img) in_array($imgType, $type);
}
/**
* 获得缩略图的尺寸信息
* @param $imgWidth 原图宽度
* @param $imgHeight 原图高度
* @param $thumbWidth 缩略图宽度
* @param $thumbHeight 缩略图的高度
* @param $thumbType 处理方式
* 1 固定宽度 高度自增 2固定高度 宽度自增 3固定宽度 高度裁切
* 4 固定高度 宽度裁切 5缩放最大边 原图不裁切
* @return mixed
*/
private function thumbSize($imgWidth, $imgHeight, $thumbWidth, $thumbHeight, $thumbType){
//初始化缩略图尺寸
$w = $thumbWidth;
$h = $thumbHeight;
//初始化原图尺寸
$cuthumbWidth = $imgWidth;
$cuthumbHeight = $imgHeight;
switch ($thumbType) {
case 1 :
//固定宽度 高度自增
$h = $thumbWidth / $imgWidth * $imgHeight;
break;
case 2 :
//固定高度 宽度自增
$w = $thumbHeight / $imgHeight * $imgWidth;
break;
case 3 :
//固定宽度 高度裁切
$cuthumbHeight = $imgWidth / $thumbWidth * $thumbHeight;
break;
case 4 :
//固定高度 宽度裁切
$cuthumbWidth = $imgHeight / $thumbHeight * $thumbWidth;
break;
case 5 :
//缩放最大边 原图不裁切
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 原图
* @param string $outFile 另存文件名
* @param string $thumbWidth 缩略图宽度
* @param string $thumbHeight 缩略图高度
* @param string $thumbType 裁切图片的方式
* 1 固定宽度 高度自增 2固定高度 宽度自增 3固定宽度 高度裁切
* 4 固定高度 宽度裁切 5缩放最大边 原图不裁切 6缩略图尺寸不变，自动裁切最大边
* @return bool|string
*/
public function thumb($img, $outFile = '', $thumbWidth = '', $thumbHeight = '', $thumbType = ''){
if (!$this-check($img)) {
return false;
}
//基础配置
$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("imagecopyresampled")) {
imagecopyresampled($res_thumb, $resImg, 0, 0, 0, 0, $thumb_size [0], $thumb_size [1], $thumb_size [2], $thumb_size [3]);
} else {
imagecopyresized($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;
}
}
Q3: HTML5网页怎么上传到微信公众平台
首先，可以使用微信公众平台的内容编辑器或其他的微信编辑器来编辑微信的内容并发布；
其次，用dw制作的html5网页要在微信公众平台上进行上传，可以通过第三方平台进行；
最后，如果不上传，也可以考虑用微信平台的链接实现对html5网页的跳转。
最后一种方法是最直接有效，而且基本上80%的微信平台都是这样使用的；
希望对你有所帮助！
Q4: 你好，我用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运行时需要引入。
├──
// 完全版本。
├──
├──
// 只有Flash实现的版本。
├──
├──
// 只有Html5实现的版本。
├──
├──
// 去除图片处理的版本，包括HTML5和FLASH.
├──
└──
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 。
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());
});
});
}
};
}]);
Q5: 手机移动端html5、js如何实现视频上传并压缩视频质量，或者降低手机摄像头拍摄质量？
你好 HTML5和javascript是不能压缩视频的，只能把视频传到服务器端，由后端来压缩视频，也不能控制相机的拍摄质量，除非你用JAVA写Android客户端才可以压缩。希望我的回答能够帮助到你，如果还有什么疑问可以继续追问。
