在img里的onload事件 使图片按比例缩放 及其注意事项

最新推荐文章于 2023-07-06 11:45:00 发布
最新推荐文章于 2023-07-06 11:45:00 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript image border function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccaakkee/article/details/2046145
版权
< script language = " JavaScript " >
<!--
// 图片按比例缩放
var  flag = false ;
 function  DrawImage(ImgD,iwidth,iheight){
     // 参数(图片,允许的宽度,允许的高度)
      var  image = new  Image();
     image.src = ImgD.src;
     if (image.width > 0   &&  image.height > 0 ){
     flag = true ;
     if (image.width / image.height >=  iwidth / iheight){
         if (image.width > iwidth){  
         ImgD.width = iwidth;
         ImgD.height = (image.height * iwidth) / image.width;
         } else {
         ImgD.width = image.width;  
         ImgD.height = image.height;
         }
         ImgD.alt = image.width + " × " + image.height;
         }
     else {
         if (image.height > iheight){  
         ImgD.height = iheight;
         ImgD.width = (image.width * iheight) / image.height;        
         } else {
         ImgD.width = image.width;  
         ImgD.height = image.height;
         }
         ImgD.alt = image.width + " × " + image.height;
         }
     }
} 
 // -->



</ script >

 

 

 

< img  name ="topAd"  onload ="javascript:DrawImage(this,300,120)"   src =''   border ="0" >

 

 

注意一点 , 事件要放到<head>里,不然有时会失效

ccaakkee
关注
专栏目录
image的加载事件(onload)和加载状态(complete)
苍穹之上倚天长鸣的博客
04-01 2735
之前做过这样一个需求，要让商家页的商家图片按照图片外面box的大小等比例缩放。之前的想法是在页面中先输出图片的src，然后在页面底部初始化js，然后在js中写相应的可以使图片按照box的大小等比例缩放的函数。要实现图片的等比例缩放要做到以下几点， 第一，得到图片的width和height 第二，比较图片的width和height与box的width的height的大小，共有四种情况，
Canvas实现图片绘制、缩放、移动和保存历史状态，纯干货（附转换公式）
weixin_42963591的博客
03-18 2558
原文地址：https://juejin.im/post/5e717376e51d4526dd1ec2e6 哈哈哈俺又来啦，这次带来的是canvas实现一些画布功能的文章，希望大家喜欢！这个css3变化公式可以适用于平常我们使用的transform属性或者是移动端我们缩放地图啊之类的都可以哟！ 前言 因为也是大三了，最近俺也在找实习，之前有一个自己的小项目: https://github.c...
JavaScript与Image加载事件(onload)、加载状态(complete)
10-28
以前写过一个图片等比缩放的Js函数，缺陷是要等到所有图片都加载完毕了，才能进行等比缩放。
IE中Image .onload方法问题
axl---专心专注于web前端开发
06-10 193
在web开发在获取图片宽高是很正常的事情，图片在加载完成前是获取不到图片的宽高的，在加载完成后才可以获取图片本身的宽高，例如： 1 var img = new Image(); 2 img.src = "loading.gif"; 3 img.onload = function(){ 4 alert ( img.w...
Image onload 事件
evilcry2012的专栏
09-26 1461
Image onload 事件  Image 对象 定义和用法 onload 事件在图片加载完成后立即执行。 语法 onload="JavaScriptCode" 参数 描述 JavaScriptCode 必须。在事件触发后执行的Javascript代码。 浏览器支持
搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内(完成)...
weixin_34278190的博客
08-04 1250
onload与complete介绍 complete只是HTMLImageElement对象的一个属性，可以判断图片加载完成，不管图片是不是有缓存；而onload则是这个Image对象的load事件回调，当图片加载完成后执行onload绑定的函数。 给下面一个例子，解释下： document.getElementById('load').onclick = function() { ...
图片等比例缩放代码，图片等比例缩放JS代码，图片缩放代码
12-21
在网页设计和开发中，图片的处理是一项非常重要的工作，特别是在响应式布局中，确保图片能够根据屏幕尺寸等比例缩放是必要的。本篇将详细讲解如何使用JavaScript实现图片等比例缩放，以及相关的编程知识。 一、图片...
图像等比例缩放 等比例缩放图片
10-20
#### 五、注意事项 1. **兼容性问题**：在不同浏览器或操作系统上，图像加载及缩放的效果可能会有所不同，因此需要注意兼容性测试。 2. **性能优化**：对于大量图像的等比例缩放处理，需要考虑性能优化措施，比如...
图片等比例缩放.txt 图片等比例缩放.txt
09-17
### 图片等比例缩放知识点解析 #### 一、知识点概述 在网页设计与开发过程中，经常需要处理图片...综上所述，图片等比例缩放是一项实用且重要的前端技术，掌握其原理及实现方法对于提升网站的用户体验具有重要意义。
图片旋转缩放翻转变换效果(css3滤镜canvas).zip
11-21
四、注意事项 1. CSS3变换性能通常优于Canvas，因为浏览器可以优化CSS3变换，但Canvas需要频繁地重新绘制。 2. 对于大规模的图形操作或游戏场景，Canvas更适合，因为它提供了更底层的控制。 3. 检查浏览器兼容性是...
js的image onload事件使用遇到的问题
12-12
关于 Image 对象 onload 事件。 想获取的是 image 的 宽高值。所以用 onload 方法。另外是获取的远程图片。 但IE在第二次显示图片的时候，总是不走 onload 方法。代码： var img = new Image(); img.src = "loading.gif"; img.onload = function(){ var iheight = img.height; var iwidth = img.width; }; 后来给xiaoniu同学看了后才知，img.src 应该是放在 onload 方法后边的。。 后来google下，才发现原来此类问题大家多有总
在我们使用image.onload读取图片文件的时候，onload的加载问题
weixin_42257506的博客
10-08 5433
在我们使用image.onload读取图片文件的时候，onload的加载问题 照片在流浪器或者APP中有无缓存，会影响onload对图片文件的读取 不知道大家用没用过image.onload方法，如果照片有缓存，那么onload方法将直接读取缓存的图片（当然，读取图片命名不变的情况下，因为我的目的是，通过活体检测，获取到实时检测的新的照片，转成base64数据上传到后台，每次得到的照片都相同命名，...
image对象onload方法
hyc0204的专栏
11-15 5334
刚使用过，记下来以后用的时候好找。 window.onload = function(){ var img = new Image(); img.src = "1.jpg"; img.onload = function(){ if(img.complete) document.getElementById("img_id").src = img.src; } }
JavaScript 中的图像加载事件
six6de6的博客
08-18 3022
JavaScript 中的图像加载事件的简单解析
javascript 中的图像加载事件
最新发布
迹忆客
07-06 1122
我们需要创建一个警告框，当 onload 事件在图像上触发时，它将显示一条消息，说明图像已成功加载。如果我们不想使用 JavaScript，我们可以使用 HTML 属性来检查图像是否已加载。因此，在这些属性的帮助下，我们可以创建一个警告框，在加载图像时显示一条消息，说明图像已成功加载。在 HTML 中，onload 属性在图像加载成功时触发，而 onerror 属性在加载图像时发生错误时触发。如果在加载图像时发生错误，它将显示一条消息，指出图像未加载。如果我们运行代码，它会显示图像加载成功的警告消息。
【JavaScript】onload图片大小设置
csdou的专栏
11-13 719
if(document.getElementById("Image1").width>500||document.getElementById("Image1").height>300) { if(document.getElementById("Image1").width>500) { docume
js 图片加载时 按比例设置图片宽高_JS使图片在图片框中自适应，按比例缩放
weixin_39625782的博客
12-22 286
//ImgD:要放图片的img元素，onload时传参可用this//h:img元素的高度，像素//w:img元素的宽度，像素function autosize2(ImgD,h,w){var image=new Image();image.src=ImgD.src;if (image.width{ImgD.width=image.width;ImgD.height=image.height;}el...
JavaScript实现图片等比例缩放
在网页设计和开发中，图片等比缩放是至关重要的，因为它确保了图片在不同尺寸的显示设备上保持其原有的比例，从而防止图像失真。失真的图片会显得模糊或者变形，影响用户的视觉体验。最佳实践是在服务器端生成缩略图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值