html5怎么压缩图片

html-css015

html5怎么压缩图片,第1张

HTML是用来做网站的一种语言哈,就是在html里面改变图片的大小就要改变文件代码,打开图片源代码,图片文件的大小是height,和宽,我们可以更改,在语言中我们需要设置的都是英文的。

现在压缩工具将图片缩小之后都会对画质有影响,压缩图片文件选择压缩工具页面中的普通压缩就可以了压缩程度不要过大,找到图片压缩工具,图片要放置在工具页面上进行数据分析,根据图片的大小工具会制定压缩方案。

图片分享论坛却只允许发几百KB的文件;微信、分享给朋友的时候自动压缩的图像都比较模糊

给你个图片处理的类吧,图片剪裁处理后,也就等于将图片压缩了。

/**

* 图像处理类

* ============================================================================

 * 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

    }

}

1,输入position:fixed;top:0;left:0;将整个div固定在屏幕的顶部和左侧。

2、输入width:100%;height:100%;min-width:1000px;这个可以适合div的高度和宽度,而min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变。

3、输入background-size: cover-webkit-background-size: cover-o-background-size: cover使图片随屏幕大小同步缩放,但是有部分可能会被裁切,不过不至于会露白,下面两句是为chrome和opera浏览器作兼容。

4、输入background-position:center0;使图片的位置,居中,靠左对齐。