jquery修改图片src获取高度问题解决

17 篇文章 0 订阅

测试浏览器是Chrome.

在修改图片的src后获取图片的高度,结果为0!

造成这样结果的原因是,图片在修改src之后,还要有一个加载的过程,虽然这个时间很短暂,但是加载完成的时间点也绝对是晚于系统执行下一条语句。

不同的浏览器表现的结果也不尽相同,在Chrome里得到的结果为0,有的浏览器里返回的是修改之前的图片的高度。

解决的方案是,拉长图片修改和使用该图片之前的时间距离,所以我在页面加载的时候,就把图片更新掉,这样,当用户使用到该图片的时候,通常会超过0.5s(网页加载跟APP不能比),这已经足够图片加载所用了。

对于使用jQuery进行图片压缩,你可以使用一些插件或者方法来实现。以下是一种常见的方法: 1. 首先,引入jQuery库和相关的插件。你可以在你的HTML文件中添加以下代码: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-image-upload/1.1.4/jquery.ajax-image-upload.min.js"></script> ``` 2. 创建一个HTML表单来上传图片,并为上传按钮添加一个事件处理程序。例如: ```html <form id="imageUploadForm" method="post" enctype="multipart/form-data"> <input type="file" name="imageFile" id="imageFile"> <button type="submit" id="uploadButton">上传</button> </form> ``` 3. 使用jQuery选择器来获取文件输入元素,并在上传按钮上绑定一个点击事件。当用户选择了图片并点击上传按钮时,触发事件处理程序。例如: ```javascript $(document).ready(function() { $('#uploadButton').click(function(e) { e.preventDefault(); // 阻止表单提交 var fileInput = $('#imageFile'); var files = fileInput[0].files; if (files.length > 0) { compressAndUpload(files[0]); } }); }); ``` 4. 创建一个函数来压缩并上传图片。你可以使用canvas来进行图片压缩。例如: ```javascript function compressAndUpload(file) { var reader = new FileReader(); reader.onload = function(e) { var img = new Image(); img.src = e.target.result; img.onload = function() { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var maxWidth = 800; // 设置压缩后的最大宽度 var maxHeight = 600; // 设置压缩后的最大高度 var width = img.width; var height = img.height; // 计算压缩比例 if (width > height) { if (width > maxWidth) { height *= maxWidth / width; width = maxWidth; } } else { if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } } // 设置canvas的宽高并绘制图片 canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); // 将canvas转换为Blob对象,并上传到服务器 canvas.toBlob(function(blob) { var formData = new FormData(); formData.append('imageFile', blob, file.name); $.ajax({ url: 'your_upload_url', // 替换为实际的上传URL type: 'POST', data: formData, processData: false, contentType: false, success: function(response) { // 上传成功处理逻辑 }, error: function(xhr, status, error) { // 上传失败处理逻辑 } }); }, file.type); }; }; reader.readAsDataURL(file); } ``` 注意替换代码中的`your_upload_url`为你实际的图片上传URL。这段代码会将选择的图片进行压缩,并将压缩后的图片以FormData形式上传到服务器。你可以在上传成功或失败的回调函数中处理相应的逻辑。 这是一个简单的示例,你可以根据实际需求进行修改和扩展。同时,还有其他一些插件可用于图片压缩,你可以根据自己的需求选择适合的插件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值