Jquery中压缩图像

简介:

Jquery中压缩图像


<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

function fixImage(img, w, h) {

    var newImg = new Image(); //获得图片的原始尺寸

    newImg.src = img.src;

    var lh;  //用于保存img.heightIE下隐藏的图片读取不到,需currentStyle解决

    if (newImg.width/newImg.height >= w/h) {

        if (newImg.width > w) {

            img.width = w;

            img.height = w * newImg.height / newImg.width;

            lh = window.ActiveXObject ? parseInt(img.currentStyle['height']) : img.height;

            img.style.marginTop = (h - lh)/2 + 'px';  //顺手垂直居中

        } else {

            img.width = newImg.width;

            img.height = newImg.height;

            lh = window.ActiveXObject ? parseInt(img.currentStyle['height']) : img.height;

            img.style.marginTop = (h - lh)/2 + 'px';  //顺手垂直居中

        }

    } else {

        if (newImg.height > h) {

            img.height = h;

            img.width = newImg.width * h / newImg.height;

        } else {

            img.width = newImg.width;

            img.height = newImg.height;

        }

    }

}

</script>

<body>


<p>

一幅图像:

<img src="/i/eg_mouse.jpg" 40, 40)" ;/>

</body>

</html>





    本文转自爱情89757 51CTO博客,原文链接: http://blog.51cto.com/59465168/1835949 ,如需转载请自行联系原作者
相关文章
|
7月前
|
存储 前端开发 JavaScript
通过JavaScript压缩图片
通过JavaScript压缩图片
32 0
|
JavaScript 前端开发
JS压缩图片,在线图片压缩,Cavas压缩图片
1. 选择一张图片 const img_original = document.getElementById('img_original'); const img_output = document.
2701 0
|
前端开发 JavaScript
【推荐】10款优秀的jQuery图片插件
本文收集了一些新鲜、有趣的jQuery插件,这些插件可用来执行不同的动画和图片效果。 1.AJAX-ZOOM 这个插件很有趣,可自动缩放镜头,同时也可转换成3D效果。在线演示 2.Transformable 尽可能的变换图像:旋转、倾斜、缩放(可用于DIV)。
1456 0
|
JavaScript 移动开发 前端开发
jquery裁剪图片插件cropit示例
重装农药第16天!! jquery裁剪图片插件cropit示例背景:做的手机网页项目,用html file控件上传图片,有些手机拍照后图片会很大,20M以上的,用之前的H5 formdata上传的话有时会非常慢的,就想着能不能在选择图片的时候直接在客户端处理下,把选择的图片按规格的大小裁剪掉,上网...
1632 0
|
前端开发 JavaScript
JS—图片压缩上传(单张)
*vue+webpack环境,这里的that指到vue实例 &lt;input type="file" name="file" accept="image/*" @change="selectImgs" ref="file"...
2504 0
|
JavaScript 前端开发 索引

相关课程

更多