js 图片按高度等比缩放

2024-09-07

JS实现图片宽高的等比缩放

关于图片宽高的等比缩放,其实需求就是让图片自适应父容器的宽高,并且是等比缩放图片,使图片不变形. 例如,需要实现如下的效果: 要实现上面的效果,需要知道图片的宽高,父容器的宽高,然后计算缩放后的宽高. 首先,图片的宽高和父容器的宽高都能方便的获取到,然后,等比缩放的算法如下: function scalingImage(imgWidth, imgHeight, containerWidth, containerHeight) { var containerRatio = containerWid

手机网站中限制图片宽度 JS图片等比例缩放

使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器

使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进行的源码: /** * js使用form上传图片,支持本地预览选中的图片,支持携带自定义参数 * @param {string} params.previewImgId 预览图片控件id,可以预览上传图片 * @param {string} params.url 提交上传的url * @param

Android代码中动态设置图片的大小（自动缩放），位置

项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

Java图片工具类，完成图片的截取和任意缩放

package com.common.util; import java.awt.Graphics2D; import java.awt.Image; import java.awt.RenderingHints; import java.awt.geom.AffineTransform; import java.awt.image.BufferedImage; import java.awt.image.ColorModel; import java.awt.image.WritableRas

JQuery 图片延迟加载并等比缩放插件

原文地址:http://www.shangxueba.com/jingyan/1909987.html DEMO地址:http://demo.jb51.net/html/jquery_img/jquery_img.htm 最近在学习JS的OOP所以写了这么个东西使用方法: $(".viewArea img").zoom({height:74,width:103}); 效果演示: http://demo.jb51.net/html/jquery_img/jquery_img.htm 代

JS图片自动或者手动滚动效果(支持left或者up)

JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果在谈组件之前来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的貌似说我用招商银行信用卡在今年的6月23日借了招商银行19800元人民币,今天是最后一天没有还款,说我其他银行钱都被冻结了.以后有可能法律投诉我!我靠我无语啊我长这么大从来都没有办理过信用卡,我根本就不需要办理信用卡,所以一直以来也没有办过,招商一卡通是有一张但是从来没有借过钱啊,身份证一直都

ImageDrawer.js图片绘制插件

ImageDrawer.js图片绘制插件有以下一些可用的配置参数. Duration:整个动画或每个步骤的绘制时间(以秒为单位) Background:在绘图时将颜色放在图片上 Callback:绘画结束时调用onece的函数 Pencil:绘图铅笔图像的选项对象 Width:铅笔图像宽度 Height:铅笔图像高度 marginTop:图片上的铅笔图像上边距 Marginalft:图片上的铅笔图像上边距 Disappear:绘图完成后,使铅笔消失的秒数 fromBottom:从图片的底部开始绘

小程序笔记三：幻灯片swiper 和图片自定义高度

滑动组件:scroll-view wxml代码 <view> <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}"> <view " bindtap="swichNav">健康</view> <view " bindtap="swichNav"&

js图片轮播效果实现代码

首先给大家看一看js图片轮播效果,如下图具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数提示: 1. index不能一直无限制的递增下去,需做判断,当大于或者等于当前图片数的时候就index归0,重新开始再次循环 2.调用切换图片函数时需将递增之后的index作为参数传过去三.定义图片切换函数提示: 1.遍历所有放数字索引的li,将每个l

Android 设置ImageView宽度固定，其高度按比例缩放适应

今天和项目经理对喷了一下,他说在应用的列表数据中的图片应该宽度固定,高度按比例缩放自适应,我说,那岂不是很丑!直接让运营那边把图片处理成固定宽高比不就好了,省的我客户端麻烦了. 这家伙不同意,为毛呢,因为我们公司的图片尼玛全部是从别的网站上荡过来的,几万张图片,本身不知道图片宽度和高度....我日.... 好吧,既然提出了这么个需求,那我就实现呗,丑不丑就我就不管了... 我在群里问了些人有木有相关的实现,可惜没人鸟我,不知道是不是我问的太简单了还是没人会...于是乎网上搜了些相关的实现方式,还

兼容好的JS图片上传预览代码

转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>本地图片预览</title> <style type="text/css"> #preview{width:100px;height:100px;b

JS图片自动和可控的轮播切换特效

点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>JS图片自动和可控的轮播切换特效 - 何问起 HoverTree</title><

【原】文本图片自适应高度小bug以及解决办法

自定义cell的文本图片自适应高度代码,如果存在自定义的cell赋值封装,就必须将自适应高度代码写在这个方法中

Spring MVC程序中得到静态资源文件css,js,图片

转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文件的路径时,直接得到404错误,而路径肯定没有错,其原因就在于在web.xml 中配置了类似如下的 spring servlet: 程序代码 <servlet>

JS图片延迟加载分析及简单的demo

JS图片延迟加载图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者淘宝,京东等电子商务网站上也用的比较多,因为页面加载时候假如我们没有用延迟加载的话那么页面上很多图片,首先要发n多个请求,性能肯定不怎么好,而我们用延迟加载技术,页面打开时候只加载第一屏数据,第二屏以上都用延迟加载滚动的时候进行加载,这样的话假如页面不管他有n屏的话那么我们只管加载第一屏的数据,后

Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结作者:轻舞肥羊日期:2012-11-26 http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文件的路径时,直接得到404错误

js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth

js图片实时加载

浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚动的时候图片才加载出来,没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高.以下是笔者目前所想到的思路,如果有更好的思路,望不吝赐教. 其实实时加载图片思路很简单,页面一开始加载的时候把不需要一开始就加载的图片(如第二屏以下的图片,反正是要往下滚动才能看到的,不如把它们设置成往下滚动的时候再实时加载)路径保持到一个自定义的属性里,如:<img class="aimg" sr

js 图片无缝循环

<html> <head> <title>Js图片无缝滚动</title> <style type="text/css"> body{ background:gray; } #wrap{ width:810px; height:200px; border:1px solid black; position:relative; left:50%; top:50%; margin-left:-410px; margin-top:-

使用jquery获取网页中图片的高度——解惑

jQuery获取网页中图片的高度使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $("img").css("width");(返回字符串:数字+"px") 但是有时候会遇到返回0的情况,上面方法返回值竟然是0或者0px,很让人诧异方法一在很早之前,我使用的解决方法,这也是我的师傅告诉我的解决方法:在你需要获取到的图片的<img&

js 图片按高度等比缩放

热门专题