正文
html5缩略图,前端缩略图
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
怎么在前端生成缩略图，只上传缩小后的图片
需要浏览器支持html5。
用FileReader读取本地文件，再用Image加载此文件并缩放绘制到canvas上。最后canvas.ToDataURL()取得缩放后文件的Base64编码，将此编码上传到服务端，解码为byte[]后，写入文件。
相关问答
Q1: 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;
}
}
Q2: html5 thumbnail有什么用
thumbnail在美工用来具体表现布局方式表达：大致相当亦为效果图及缩略图，很小(大约为3×4英寸)，缩略了细节比较粗糙，是最基本的东西。直线或水波纹表示正文的位置，方框表示图形的位置。然后，中选的小样再进一步发展。
以下举个案例：
a元素超链接thumbnail呈缩略图构成 div class="col-xs-6 col-md-3" /div：
div class="container"
div class="row"
div class="col-xs-6 col-md-3"
a href="" class="thumbnail"
img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180px;width: 100%;display: block;"
/a
/div
div class="col-xs-6 col-md-3"
a href="#" class="thumbnail"
img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180px;width: 100%;display: block;"
/a
/div
div class="col-xs-6 col-md-3"
a href="#" class="thumbnail"
img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180px;width: 100%;display: block;"
/a
/div
div class="col-xs-6 col-md-3"
a href="#" class="thumbnail"
img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180px;width: 100%;display: block;"
/a
/div
/div
/div
Q3: 如何使用HTML5视频缩略图显示
你好，非常高兴能解决你的问题：
大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
在HTML5中，video元素目前支持三种格式的视频文件，
1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
3.WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
那么在HTML5中如何显示视频呢？例子如下：
复制代码
代码如下:
video src="demo.mp4" width="500" height="250" controls="controls"您的浏览器不支持此种视频格式。/video
好了，现在来解释下video元素中各属性的含义，其中width、height就不解释了啊，主要说下controls,顾名思义，controls 就是控件们，哈哈，就是视频的播放、音量暂停等控件。video元素中间插入的汉字，聪明的你一定知道的，是提示用户浏览器不支持视频格式使用的。
需要注意的是，要确保适用于Safari 浏览器，视频文件必须是 MP4类型。而ogg格式的视频则是适用于Firefox、Opera 以及Chrome 浏览器。Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。
当然了，我们如果不确定自己的浏览器支持什么格式的视频，可以先检测一下，检测方法在另一片博文里有，感兴趣的可以去看一下。若是不想麻烦，那怎么办呢？我们可以这样：
复制代码
代码如下:
video width="500" height="250" controls="controls"
source src="movie.ogg" type="video/ogg"
source src="movie.mp4" type="video/mp4"
您的浏览器不支持此种视频格式。
/video
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式，这样我们只要多准备几个不同格式的视频就可以了。
接下来，介绍几个video标签的属性，
1.autoplay :出现该属性意味着视频在就绪后将自动播放，用法：autoplay="autoplay"
2.controls :出现该属性意味着向用户显示控件，如播放按钮等，用法：controls="controls"
3.height:设置高度
4.width:设置宽度
5.loop:自动重播，用法：loop="loop"
6.preload:视频在页面加载时进行加载并预备播放，用法：preload="auto"
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
注意：若使用了autoplay，则忽略preload
7.src:要播放视频的url
希望能解决你的问题！
