Jquery中压缩图像
<!DOCTYPE html>
<html>
<head>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/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.height，IE下隐藏的图片读取不到，需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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/i/eg_mouse.jpg" 40, 40)" ;/>
</body>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
