开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

有没有办法用jquery读出图像的"naturalWidth"？

当然可以！在 jQuery 中，可以使用 .naturalWidth 属性来读取图像的原始宽度。以下是一个简单的示例，展示了如何使用 jQuery 读取图像的 "naturalWidth"：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>jQuery NaturalWidth Example</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="example-image" src="example-image.jpg" alt="Example Image" style="display:none;">
   <script>
        $(document).ready(function() {
            var naturalWidth = $('#example-image')[0].naturalWidth;
            console.log('The natural width of the image is: ' + naturalWidth + 'px');
        });
    </script>
</body>
</html>

在这个示例中，我们首先引入了 jQuery 库。然后，我们在页面上添加了一个图像元素，并将其 display 属性设置为 none，以便在页面上不显示它。接下来，我们使用 jQuery 选择器选择该图像，并通过 $('#example-image')[0].naturalWidth 读取其原始宽度。最后，我们将结果输出到控制台。

请注意，由于浏览器可能会在加载图像时缓存其尺寸，因此在某些情况下，.naturalWidth 可能不会立即提供有效值。在这种情况下，您可能需要等待图像完全加载，然后再尝试读取其 "naturalWidth"。您可以使用 jQuery 的 .on('load', function() {...}) 事件处理程序来实现这一点，如下所示：

$('#example-image').on('load', function() {
    var naturalWidth = this.naturalWidth;
    console.log('The natural width of the image is: ' + naturalWidth + 'px');
});

这将确保在图像加载完成后才尝试读取其 "naturalWidth"。

相关搜索:有没有办法用白色填充图像的内部？有没有办法用Jquery完成||或带有click函数的语句？有没有办法不显示用Matplotlib FuncAnimation生成的.PNG图像？有没有办法缩小图像的半径？有没有办法让屏幕阅读器同时读出标签和元素的内容？有没有办法在jQuery中上传ajax文件后刷新图像？有没有办法用jquery把数据追加到本地的excel文件中？有没有办法调整图像数组中的图像的大小有没有办法在手机上用CSS或jQuery控制窗口高度？有没有办法用OpenImageIO的python绑定从图像中提取像素颜色信息有没有办法制造电池用的customView？有没有办法用IPython隐藏显示的对象？有没有办法只弃用变量的setter？有没有办法用sceneform测量房间的尺寸？有没有办法用最新的内核创建vDSO？有没有办法用JS隐藏绝对的div？有没有办法用mongoose填充不同的值？有没有办法用Jest写这样的东西？有没有办法用jquery或js在动态列表项中显示div？有没有办法更新bokeh图像的colorMapper值？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

HTML5上传图片，后台使用java

<script src="${base_path}/view/html/js/flexible.js"></script> <script src="${base_path}/view/html/lib/jquery.js"></script> <script src="${base_path}/view/html/lib/mobileBUGFix.mini.js"></script> <script src="${base_path}/view/html/lib/fastclick/fastclick.js"></script> <script src="${base_path}/view/html/lib/exif.js"></script> <script src="${base_path}/view/html/lib/jquery.base64.min.js"></script> <script src="${base_path}/view/html/js/common.js"></script> <script src="${base_path}/view/html/js/membercenter/certification.js"></script>

01

HTML5 canvas drawImage() 方法记录

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

02

60. 数码相机成像时的噪声模型与标定

如果你对摄影有一点基础的了解，可能你经常知道的常识是拍照时，在保证图像曝光合适的情况下要尽量用低ISO，因为高ISO会带来高噪声，就像下图所示

01

JS获取图片原始宽高

最近在给博客的相册模块做优化，需要知道图片的原始大小，我以前的做法是把图片的真实宽高分别放在data-width和data-height中，效果是达到了，但是总觉得扩展性很低，当不知道图片的大小时，还要一张一张图片的去查看图片信息手动输入图片大小，很繁琐

02

阿里前端一面面经

前两天下午四点打过来的电话，没接到。因为是座机分机所以不能打过去（试了几次，这个事情告诉我们手机要随身携带，万一面试官用座机打的，你还不能回拨）。于是我等啊等，终于在快七点面试官给我打过来了。阿里面试的用户体验是真的好，面试官很耐心。再次感谢阿里hr都很好，昨天查了状态已回绝。自己实力不够，还需继续修炼先说说总体情况面了三十多分钟，我问问题用了十几分钟，总共四十多分钟。基本的问题回答出来了，但是本人比较内向，不是很会接话茬子有点尬聊。每次回答完一个问题，就安静了几秒钟。基本问题都回答出来了，然后再一点点

00

如何对图片是否加载完成进行断言

很多时候会遇到需要断言网页中图片是否加载完成来判断用例执行是否成功。而WebDriver只会检查DOM中是否有image 标记，而不能检查这个图片是否不可见或者坏掉。此时我们的思路是利用javascript属性naturalWidth是否大于0去判断图片是否加载完成。部分代码如下：

03

前端：Canvas进行简单图片压缩算法

图片压缩算法通过canvasAPI进行在Web端上传的时候进行图片压缩。通过宽高压缩（第一次压缩 - Canvas宽高）通过API压缩（第二次压缩 - HTMLCanvasDom.toDataURL()）简述步骤通过input输入框用来坐上传，通过chang事件获得上传的文件。对上传的文件进行一些简单的类型，大小的判断然后开始压缩。压缩图片第一步将用户上传的图片(file)转为base64格式-new FileReader() -> ReaderAsDataUrl()异步读取

01

【前端监控】静态资源测速&错误上报

一个页面的加载快慢，最重要的指标就是静态资源的加载速度了吧。你拼了命得对代码进行优化几十ms，结果静态资源一个不爽就给你耗了几百ms。

02

从Storyboard到DIY实现一个漫画生成器-01

用户只需拍摄一段视频并将其加载到 Storyboard 中即可将视频转换为单页漫画的布局。该应用会自动选择有趣的帧，并将其应用于6种视觉样式中的一种。生成的漫画大约1.6万亿种不同的可能性！

04

当网页图片不存在时不显示叉叉，显示默认图片的方法，管用的很！

有时候管理系统里面的产品图片没上传，或者因为网络原因传输过程中断了，图片没显示出来，就会显示一个叉叉，并且图片的占位符也不起作用了。昨晚上花了1个小时搜索、调试，验证了几种网络上的方法，最终有2种方法的确有效，鉴于代码优美的需要，我选择了如下一种。

02

教程 | 如何在Tensorflow.js中处理MNIST图像数据

对任何一个机器学习问题而言，数据处理都是很重要的一步。本文将采用 Tensorflow.js（0.11.1）的 MNIST 样例（https://github.com/tensorflow/tfjs-examples/blob/master/mnist/data.js），逐行运行数据处理的代码。

03

Flask-Assets实例学习

在使用Flask进行web开发中，经常会用到很多的静态CSS或JS文件，占用了大量的空间，有没有办法可以将这些静态文件打包成一个文件，并进行压缩处理呢？Flask-Assets就提供了这个功能。 Flask-Assets实际上是对webassets库进行了一层封装。

02

【项目】前端图片裁剪

最近做了一个需求，是做视频封面裁剪的，涉及到的一个功能点是自动裁剪，就是拿到一张图片，自动裁剪图片的中间区域成一个正方形

03

【不可思议的CANVAS】画一只会跟着鼠标走的小狗

这个例子来自于[CodePen]，它是根据鼠标的位置设置两个眼球的transform: rotate属性做的效果。

02

如何使用FormData上传压缩裁剪后的图片Blob对象

在前端页面，我们通常会遇到需要用户上传图片的操作，可能还会在前端进行图片编辑的操作（比如头像的选区裁剪），然后如果图片过大的话，我们还会对图片进行压缩。这些功能我们通常通过Canvas来进行，最后使用Canvas API函数toDataURL来得到图片的Base64字符串，然后当我们要上传到后台的时候，会面临2种选择：

03

使用 Apaxy 美化网页目录浏览

我们知道 Apache 服务器默认是不支持目录浏览，这是安全考虑，如果你有个目录都只是静态文件，自己希望浏览，那么只要在当前目录的 .htaccess 添加 Options +Indexes 指令，就可以开启目录浏览：

02

【说站】javascript回调函数的异步探究

1、JavaScript代码本质上总是阻塞的。但是这种阻塞性使我们无法在某些情况下编写代码。

04

你的网页有多快 — 从 DOMReady 到 Element Timing

总所周知，写文章需要一个标题。虽然我们搞代码的人一般都喜欢单刀直入，但是受制于文体的约束和发表载体的要求，有时不得不想一个标题。而起一个标题，不亚于起一个函数名或者变量名。单就这篇文章，我就有好几个草稿标题，例如：《页面加载指标演进之路》，《Element Timing：一种全新的页面速度指标》，《如何最准确地测量网页加载速度》，《新前端下的页面加载速度》，甚至《Element Timing In Action》，《三分钟学会测量页面速度》。最后综合考虑了读者的承受能力，编辑的意见，以及最最重要的：本人的孱弱写作实力，就取了个这样的一个非常大众化，既不会一眼就被当成垃圾，也不会被人挑出来仔细找茬的标题。

02

C语言讨论象棋将帅问题，代码短又美！

问题的本身并不复杂，只要把所有A、B 互相排斥的条件列举出来就可以完成本题的要求。由于本题要求只能使用一个变量，所以必须首先想清楚在写代码的时候，有哪些信息需要存储，并且尽量高效率地存储信息。稍微思考一下，可以知道这个程序的大体框架是：

03

吴恩达机器学习笔记9-代价函数直观理解之二

Model and Cost Function_Cost Function - Intuition II”

03

在线图片压缩,JS实现图片压缩功能

1. 选择一张图片 const img_original = document.getElementById('img_original'); const img_output = document.getElementById('img_output'); let blob; function preview(file) { let reader = new FileReader(); reader.onload = functio

01

IQE14: 色差(Chromatic aberration)产生原理及去除

各位朋友，欢迎来到新的篇章！在前面的文章中，我们学习了如何去除图像中的镜头畸变和晕影(Vignetting)，特别的是我还在上一篇文章中讨论了去除晕影操作的合理的位置。如果你忘记了细节，请回顾以下的文章：

01

Vue.js 快速上手精华梳理-为什么选择Vue？

Vue是一个前端Javascript框架，与React Angular 并称为前端三大主流框架 Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

03

你的芯片，能抵挡住几次攻击？

如果大家看过速度与激情这部电影，一定对下面这一幕有深刻的印象：黑客通过远程控制上千辆的僵尸车辆，去自动拦截抢夺握有核发射密码的人! 然后掌控人类的命运。

04

43. 计算传感器

按照他的遗嘱，他去世时没有葬礼，没有正式的仪式，而他的骨灰则洒在内华达山脉荒野的某个秘密地点——他只是想静静的离去。

02

JQuery事件处理

Jquery事件 1、绑定事件示例代码：绑定事件

什么是绑定事件？这是隐藏的内容，点击上面的内容会显示这里的内容。

<script language=”javascript”> //单击显示，再次点击隐藏 /*$(function(){ $(“a”).bind(‘click’,function(){ if($(this).next().is(“:visible”)){ $(this).next().h

05

[ 后端篇 ] 06 - AWS DynamoDB 操作二三事

以上两种办法，肯定是第二种办法比较方便，而且只进行一次update操作，而第一种办法，先进行get操作，然后put操作，进行了两次读写。

06

Signalr系列之虚拟目录详解与应用中的CDN加速实战

本文主要讲解了SignalR如何在项目中进行虚拟目录和CDN加速，以及如何进行JS的优化和动态生成Hubs.js。同时还介绍了如何在开发过程中使用SignalR的小工具来自动生成Hubs.js，以及SignalR的更多高级功能。

05

浏览器之性能指标-CLS

如果想了解该系列文章(「浏览器底层原理&优化方案」)，可以参考我们已经发布的文章。如下是往期文章。

02

分享一个支持https的CDN及启用SSL后续问题汇总

之前张戈博客全站启用了 https，并分享了相关经验心得。用了一段时间，问题还是不少，所以继续整上一篇文章，汇总一下网站启用 https 之后出现的问题以及解决办法。在分享这些问题之前，我先分享一个国内支持 https 的 CDN，让个人博客也能无忧启用 https，而不暴露真实 IP。我现在用的是腾讯云内测的支持 https 的 CDN，其他人也就暂时用不了。本以为国内基本就没有其他支持 https 的 CDN 了，结果晓庄等几个博主留言分享了一个支持 https 的 CDN——VeryCloud。

07

李宏毅深度学习之Deep Learning神经网络特殊结构（一）

如下图所示，输入5和6，直接放大或者旋转，对于CNN来说认为是不一样的。那怎么办呢？那中间加一个Layer，旋转缩放层，即spatial transformer layer，也是一个NNlayer。它不仅可以transform输入图像，也可以transform feature map。

02

Hinton领衔谷歌大脑新研究，拯救被认成步枪的乌龟

最近，深度学习之父Geoffrey Hinton带领的谷歌大脑团队，提出了一种防御对抗攻击的新方法。

02

Hinton领衔谷歌大脑新研究，拯救被认成步枪的乌龟

最近，深度学习之父Geoffrey Hinton带领的谷歌大脑团队，提出了一种防御对抗攻击的新方法。

01

使用canvas组合多图

html展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <img class="compoundImg" sr

02

jquery下载教程[通俗易懂]

建议使用google浏览器下载，不建议使用IE浏览器（没有办法生成.js文件，只能复制粘贴）

03

一日一技：如何在浏览器中使用npm包？

但由于JavaScript生态里面，有Node.js这个东西，这就导致第三方库有两种不同的导入方式。如果我们要做一个网站，我们通常会在HTML中，使用<script>标签引入.js文件，例如：

00

业界丨外媒专访吴恩达：聊天机器人在中国的普及将比美国快

在刚刚过去的2016年，科技圈内谈论最多的就是自动驾驶和机器人，而驱动两者快速前行的核心动力，就是迅猛发展的人工智能（AI）。那么人工智能到底是什么？它可以为人类做什么？它对人类未来又会产生什么深远的影响？在很多业内人士看来，2017年认为是机器人之年。这里所说的机器人，并不是《终结者》系列中的T-1000，也不是每隔几个月上头条的人形机器，而是出现在你的客厅，拥有人工智能的各种独立设备。在这股机器人浪潮中，从知名度来说Google Home和亚马逊Echo无疑是其中的代表；而从技术角度来说，国内也有

canvas相关API简介及思考

canvas对于大部分前端开发人员来说，可以用一个词来形容--既熟悉又陌生。为什么这样说，因为大部分前端开发人员在写业务代码的时候用到canvas的概率很小，就算用到了，也只是类似drawImage这个API,并且，对drawImage这个API的了解也并不深刻，只知道它可以将图片绘制到画布上，其他的功能大部分人应该都不知道。

03

机器学习与网络安全（三）线性代数

现在的人工智能完全由数据来驱动，我们所见到的数据，比方说一张图片有三个通道，分为R（红）、G（绿）、B（蓝），每个通道是一个图层，相当于有三张图层，比如每一张图片是50*50像素，50*50*3就是整个数据的大小。这种数据在人工智能使用时，会被变成一个矩阵，相当于有一个50行50列高度3的矩阵，矩阵里面每一个小单元是一个数字，这个数字就是像素。从0到255反映颜色的色阶从少到多，三通道反映了点的颜色从而绘制了整个画面，这样的数据我们把它叫做原数据，把原数据送进我们的人工智能系统，学习完特征后，把结果读出来，“结果”其实是一个概率。

02

为什么那么多公司钟爱 Flutter ？

各公司都开始关注和使用跨端方案【包括大厂阿里巴巴以及腾讯】目前主流的跨端方案主要分为两种：一种是将 JavaScriptCore 引擎作为虚拟机的方案，代表框架是 React Native；另一种是使用非 JavaScriptCore 虚拟机的方案，代表框架是 Flutter。【其中还有一种是使用 Webview 的方案-待会也会讲解到】

02

【强化学习】DQN 的各种改进

DQN 发表于 NIPS 2013，在此之后 DeepMind 不断对 DQN 进行改进，首先在 2015 年初发布了 Nature 文章，提出了 Nature 版本的 DQN，然后接下来在 2015 年一年内提出了 Double DQN，Prioritied Replay，还有 Dueling Network 三种主要方法，又极大的提升了 DQN 的性能，目前的改进型 DQN 算法在 Atari 游戏的平均得分是 Nature 版 DQN 的三倍之多。因此，在本文中，我们将介绍一下各个改进的方法，并在最后给出用 Nature-DQN 的实现方法。

03

jscanvas合成图片实现微信公众号海报功能

在微信公众号开发中,很多时候都有个需求是一张图加上头像和昵称或者其他数据生成自己的二维码海报或者是生成分享海报

02

对于移动端跨平台（双端）开发的一些构思

套壳模式是开发APP可以说是最简单快捷的（对于web开发者来说），基本上只要有一个正常能用的手机端可以UI适应的web就可以通过套一个壳完成APP开发。套壳的问题主要有2个

03

对JAVASCRIPT匿名函数的理解

网上很多解释，我无法理解，我想知道原理。。。这篇文章应该可以透彻一点 Query片段： (function(){ //这里忽略jQuery所有实现 })(); 　　要说匿名函数，我们首先要由函数本身说起。函数的定义如下：函数是将唯一的输出值赋予给每一输入的“法则”。　　当然，这只是数学上的定义。但是，在计算机编程语言中，函数的定义也八九不离十。因为，我们都知道，计算机中的函数，也类似数学定义中的描述，它是将输入的若干数据，经过代码设定的逻辑操作处理后，返回唯一的输出的一组代码组合块。—

08

sql server故障处理之备份损坏

1、备份文件和数据库放在同一个（或一组）的物理磁盘上。磁盘出现故障，备份也保不住了。

01

ASP.NET 主题（Themes）FAQ

1、主题是什么主题由一组元素组成：外观、级联样式表 (CSS)、图像和其他资源。主题将至少包含外观。主题是在网站或 Web 服务器上的特殊目录中定义的。主题是一组Web Control的属性设置的集合，提供一种简单的方法设置控件的样式属性。 · 主题只在Web Control中有效 · 母板页（Master Page）上不能设置主题，但是主题可以在内容页面上设置 · 主题上设置的Web Control的样式覆盖页面上设置的样式 · 如果在页面上设置EnableTheming="false"，主题无效 ·

05

详解 JS 压缩图片

作者 | wuwhs https://segmentfault.com/a/1190000023486410

03

从SAP最佳业务实践看企业管理(97)-PP-浪费损耗

如何控制人为的浪费 1、拆装料不当：对设备操作人员进行培训，对应的包装形式使用对应的料架 2、用错料，重工浪费：每班有3次查料，换料时对应料盘以一换一的方式进行，由专门人员确认，并测试数值 3、物料领取及退库数每天都有点实数的 4、机器设备不良导致异常消耗，有时候没有办法及时发现，还没有办法及时避免 5、有发现有时候操作人员为了追求产量，提前换料，没有做完的物料就消耗掉了，现在也没有办法控制。 6、对于线上正常生产时候所产生的不良品的返修消耗，暂时也没有好的办法控制…… 更多的高手一起讨论物料损耗严重控

04

让你在WebView中用JS调Native Object

之所做这个东西，源于之前项目中需要把一些页面用webView来呈现，但是web中需要调用native的方法，比如获取本地存的某些数据、调用摄像头等等，这里也就是说JS要和OC能够互通有无。所以简单来说我要做的事情就是要实现一个bridge，用于两方之间的通信，使其在web中能够像调用一个普通的JS一样去调用OC。

03

Linode 虚拟主机安装 discourse 邮件没有发送

linode VPS 安装后 discourse 的电子邮件始终没有办法发送成功。

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭