Clipic.js插件可以为移动端 (仅支持移动端) 提供头像上传并裁剪成指定尺寸，用原生js开发的，轻量级，包含html跟css，不到8kb。点此链接体验： https://teojs.github.io/clipic/
https://github.com/teojs/clipic
参数说明
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 (默认：[‘取消’, ‘重置’, ‘完成’]) – 底部三个按钮文本
http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0
给你个图片处理的类吧，图片剪裁处理后，也就等于将图片压缩了。
/*** 图像处理类
* ============================================================================
* Copyright 2014 大秦科技，并保留所有权利。
* 网站地址: http://www.qintech.net；
* ============================================================================
*/
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
}
}
html5中设置整页背景图片的方法是利用css3样式：写法如下：img.bg { /* Set rules to fill background */ min-height: 100% min-width: 1024px /* Set up proportionate scaling */ width: 100% height: auto /* Set up positioning */ position: fixed top: 0 left: 0}@media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg {left: 50% margin-left: -512px /* 50% */ }}
多媒体：之前曾经介绍过，在HTML5中可以通过<video>标签在网页中播放影片，且不需要再安装额外的插件，此功能已经带给用户极大的便利。但基本的<video>标签只提供了简单功能的播放器界面，如果想要改变播放器的外观和功能，只能结合<canvas>标签和javascript语句，就能制作出酷炫的播放控制器。
{drawImage}
画布canvas如何与视频video标签结合，达到制作各种视频功能的效果呢？其秘诀在于通过画布重新描绘一次视频的内容，将视频的每个画面都转换成画布的图像，这样就可以通过javascript语言所提供的图像控制方法来 *** 控它们。所以炫酷播放器所使用的视频功能，并不针对video，而是针对描绘出影像的canvas。
能够描绘影像到画布中的方法是“drawImage"，此方法允许在canvas中插入画布（canvas），图像（img）和视频（video）等元素。
drawImage方法有三种：
drawImage（image，dx，dy）//原比例绘制图像
drawImage（image，dx，dy，dw，dh）//按设置长宽绘制图像
drawImage（image，sx，sy，sw，sh，dx，dy，dw，dh）//裁切后绘制图像
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）