JavaScript改变图片大小

最新推荐文章于 2023-11-11 22:37:07 发布
最新推荐文章于 2023-11-11 22:37:07 发布
阅读量4.1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43347473/article/details/89296010
版权

JavaScript改变图片大小

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态改变图片大小</title>
        <script language="JavaScript">
            window.function () {



                var n=2;
                var r=1;
                var control=true;

                setInterval(function warp(){

                    if(control==true){
                        n++;
                    }
                    else{
                        n--;
                    }
                    if(n==300)control=false;//
                    if(n==1)control=true;
                    if(control==true){
                        oPic.width+=1;
                        oPic.height+=1;
                    }
                    else{
                        oPic.width-=1;
                        oPic.height-=1;
                    }

                },30);//每隔30毫秒调用一次warp函数
            }
        </script>
    </head>
    <body bgcolor="aqua">
        <img  src="myImages/5.jpg" name="oPic"width="100">
    <!--放在当前目录下的图片-->
    </body>

</html>

在这里插入图片描述

在这里插入图片描述

东子Yang
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS修改图片的大小
weixin_30600503的博客
12-01 3372
注：利用js是不能修改图片的实际大小的，修改的只是图片在标签中对应的width,height属性。 1.通过var p = document.getElementById('image')获取到对应id的DOM对象 2.再使用对象的style属性(前提是image对象已经设置过style属性)，p.style.width='200px'(切记：此处是字符串，格式一定是：???px,不能只写个...
JavaScript 动态改变图片大小
10-29
本文将详细解释如何使用JavaScript动态改变图片大小，特别是在图片尺寸超过预设限制时进行缩放。 首先，我们要明确目标：当图片的宽度或高度大于100像素时，将其尺寸调整为100 X 100像素；如果图片原本的尺寸小于或...
JS对图片尺寸和DPI进行编辑修改（1寸照修改为2寸照）
weixin_36114953的博客
11-11 596
一寸照修改为2寸照
nodejs处理图片的几种方法,使用sharp，jimp，webconvert
zrc_xiaoguo的博客
10-24 6493
Sharp是一款快速高效的Node.js图片处理库，支持图片格式转换、尺寸调整、压缩、裁剪、旋转、水印等功能。
js 调整图片大小
做最好的自己
06-11 5799
做网站的时候，客户自己发布的图片有的时候会把页面撑开，破坏页面的效果，用css表达的式的方式，图片比较大时经常不能达到限制图片尺寸的效果，于是写了一个可以限制指定图片的尺寸的js脚本。function resetpicsize(){ if(document.all.thispic.offsetWidth>480) {
JS---改变图片大小
weixin_34007879的博客
09-26 1926
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>改变图片大小 方法1</title> <script> function showbigger(){ ...
鼠标滚轮改变图片大小的示例代码
09-04
在本文中，我们将深入探讨如何利用JavaScript实现鼠标滚轮改变图片大小的功能。这个功能在许多网页应用中非常实用，比如在线查看图像、编辑图片等场景。通过监听鼠标的滚轮事件，我们可以动态调整图片的缩放比例，...
javascript 图片放大效果函数
10-29
图片放大效果实现代码，需要的朋友可以参考下。
js自动修改图片尺寸
06-05
js自动修改图片尺寸
JS实现控制图片显示大小的方法【图片等比例缩放功能】
10-20
主要介绍了JS实现控制图片显示大小的方法,即实现图片等比例缩放功能,涉及JS动态操作页面元素属性相关技巧,需要的朋友可以参考下
JavaScript限定图片显示大小的方法
11-30
该函数的主要作用是根据给定的最大宽度(`limitW`)和最大高度(`limitH`)来调整图片组件(`thisobj`)的显示大小，以确保图片不会超出设定的限制，同时保持原始宽高比。 首先，我们来看看`imageResize`函数的参数： 1. ...
javascript 调整图片大小
Waiting for ...
04-11 1884
javascript: 改变和控制显示的图片大小（保持比例，同时可限制高宽）， onResize显示改变后的图片大小，原来是34 xxxx加大xxxx yyyyyy换图yyyyyy yyyyyyy图大小yyyyyy
如何使用JS等比例改变显示图片的大小
LeeJay5的专栏
10-31 3572
当你在JSP页面或是HTML页面，显示图片需要控制其大小时，则可以使用以下方法： 法一：        function imgSize(ImgD,imgW,imgH){     var image=new Image();     image.src=ImgD.src;     if(image.width>0 && image.height>0){      if(image
怎么用js改变html里面的图片大小,网页中图片属性固定宽度，如何用js改变大小...
weixin_42374763的博客
06-04 2026
后台上传图片后，都有一个图片属性，会指定图片的宽和高，如果图片固定了宽度和高度，PC端用max-width可以控制最大宽度，高度自动缩放。但是手机端就没法自动缩放，可以使用js来改变图片的style，通过100%比例，当然也可以设置px固定的高度宽度。下面这些代码是摘自网上，测试了下还是比较好使的，主要也是为了解决网站电脑端和手机端共用一套数据时，造成的图片变形问题，由于后台上传图片时会自动设置图...
开题报告宠物医院管理系统的设计与实现 已通过开题答辩的.docx
最新发布
07-25
随着人们生活水平的提高和精神需求的增加，宠物已经成为很多家庭的重要成员，宠物市场的规模和潜力也不断扩大。宠物医院作为宠物健康保障的重要机构，需要适应市场的发展和变化，提供更加专业和便捷的服务。宠物医院的业务和信息涉及多个方面，如科室信息、医生信息、坐诊信息、药品信息、挂号信息、网站公告信息等。如果采用传统的手工或半自动化的管理方式，会造成信息的分散、混乱、更新困难、查询不便等问题，影响管理的效率和质量。系统能够通过计算机技术和网络技术对宠物医院业务进行集中管理。它可以实现信息的录入、存储、查询、修改、删除、统计、分析、展示等功能，方便宠物医院的管理人员和工作人员进行业务操作和决策支持。宠物医院管理系统还可以利用网络技术，向宠物主人和宠物爱好者提供在线的服务和咨询，方便宠物主人和宠物爱好者了解和关爱自己的宠物，增强宠物医院的社会影响力和竞争力。综上所述，宠物医院管理系统是一个具有实际意义和应用价值的选题，它可以为宠物医院的管理和服务提供有效的支持，为宠物主人和宠物爱好者提供便捷的服务和咨询，为宠物的健康和福利做出贡献。
js 压缩html 图片上传,js canvas 前端实现修改图片尺寸压缩图片大小
05-17
压缩HTML： 可以使用多种工具来压缩HTML，例如HTMLMinifier或UglifyJS等。这些工具可以删除不必要的空格、注释和其他字符，从而减小文件大小。以下是使用HTMLMinifier进行HTML压缩的示例代码： ```javascript const html = '<html><head><title>Hello World</title></head><body><p>Hello, world!</p></body></html>'; const minifiedHtml = htmlMinifier.minify(html, { collapseWhitespace: true, removeComments: true, minifyCSS: true, minifyJS: true }); ``` 图片上传： 可以使用HTML5的File API来实现图片上传。以下是一个基本的示例： ```html <input type="file" id="upload-input"> <script> const input = document.getElementById('upload-input'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const imageData = event.target.result; // 图片数据 // 将图片数据上传到服务器 }; reader.readAsDataURL(file); }); </script> ``` JS Canvas 修改图片尺寸和压缩大小： 可以使用canvas的API来修改图片的尺寸和压缩图片大小。以下是一个基本的示例： ```html <input type="file" id="upload-input"> <canvas id="canvas"></canvas> <script> const input = document.getElementById('upload-input'); const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const img = new Image(); img.onload = () => { // 计算缩小后的尺寸 const maxWidth = 300; const maxHeight = 300; let width = img.width; let height = img.height; if (width > height) { if (width > maxWidth) { height *= maxWidth / width; width = maxWidth; } } else { if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } } canvas.width = width; canvas.height = height; // 绘制缩小后的图片 context.drawImage(img, 0, 0, width, height); // 压缩图片 const quality = 0.7; const imageData = canvas.toDataURL('image/jpeg', quality); // 将图片数据上传到服务器 }; img.src = event.target.result; }; reader.readAsDataURL(file); }); </script> ``` 以上是一个基本的实现，具体的实现方式可以根据需求进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值