首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS获取图片原始宽高

最近在给博客的相册模块做优化,需要知道图片的原始大小,我以前的做法是把图片的真实宽高分别放在data-width和data-height中,效果是达到了,但是总觉得扩展性很低,当不知道图片的大小时,还要一张一张图片的去查看图片信息手动输入图片大小...,很繁琐 获取图片大小: 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片的宽度 但是需要注意的是这里拿到的宽度是图像在CSS...像素中渲染的宽度 也就是说如果图片原始大小1200,使用css或者width属性设置为600,那么这里拿到的宽度为600,显然用innerWidth获取图片原始尺寸是不靠谱的 2.使用document.createElement...document.createElement("img") img.src = "1.jpg" var width = img.width 动态创建一个imgElement,通过给src赋值,最终来获取...img的宽和高 需要注意的是在给img的src赋值时,这是一个异步过程,会存在获取img的宽度时值为0(图片还未加载完成),可以在给img赋值之前加上onload事件 var img = document.createElement

6.3K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    相机or相册获取图片并显示

    Environment .getExternalStorageDirectory(), "test.png")); // 指定照片保存路径(SD卡),test.png为一个临时文件,每次拍照后这个图片都会被替换...Environment .getExternalStorageDirectory(), "test.png")); // 指定照片保存路径(SD卡),test.png为一个临时文件,每次拍照后这个图片都会被替换...使用保存文件之后再读取而不是直接用data的原因是,这里返回的data是一个缩略图,十分不清晰 if (requestCode == CAMERA_REQUEST_CODE) {// 将保存在本地的图片取出并缩小后显示在界面上...bitmap.getHeight() / SCALE); // 由于Bitmap内存占用较大,这里需要回收内存,否则会报out of memory异常 bitmap.recycle(); // 将处理过的图片显示在界面上

    1.8K70

    JS获取图片中随机一点颜色

    实现效果 昨天泽泽分享了一篇有意思的文章:纯CSS根据图片取色设置背景色,主要分享了一个就是div嵌套img的时候,如何实现div的颜色为img中一点的颜色。...如下图所示,在PS中打开一张图片,如果将这张图片一直放大,具体到每个像素点,会发现图片单个像素点内的颜色值都是唯一的。...实现效果 有了具体的思路了就是如何实现了,因为我这个页面是前后端渲染的动态页面,改PHP代码的话有点麻烦,所以我就考虑从前端入手,使用JQuery来实现: 获取每一个友链链接.board-item; 然后通过显示迭代获取每一个友链中的背景图...; 然后将下方文字的背景图设置为获取的背景图地址,同时,使用Math.random()产生一个随机数,这样的话就可以实现对图片中随机一点进行取色,且每次刷新都会产生不一样的效果。...text-align:center; } span { color:red; } <script src="https://code.jquery.com/jquery-latest.<em>js</em>

    3.8K30

    Access获取外部数据(一)

    大家好,本节主要介绍Access数据库如何与外部进行数据交换,Access提供3种外部数据交换方式包括导入、导出和链接三种。...选择外部数据选项卡--新数据源,可以根据需要选择。 ? 下面以Excel表为例来做简单演示:首先选择外部数据--新数据源--文件--Excel。 浏览需要打开的文件后,会提供两种选择。...而采用创建链接表,在源数据中做的更改也会在Access表中更新,而无法Access表中的更改源数据。) ?...---- 二、导出 导出数据较为简单,在外部数据选项中,选择导出文件的类型,Access数据库可以导出Excel、PDF、文本文件等多种文件格式。按提示选择即可。 ? ---- ?...今天下雨 本节主要介绍了Access与外部数据交换方式中导入、导出,下一节将介绍链接的方式,祝大家学习快乐,记得戴口罩,勤洗手。

    2.9K10

    Access获取外部数据(二)

    上节介绍了Access数据库与外部进行数据交换的方式中的导入、导出,本节介绍最后一种链接的方式。...---- 之所以有时候不选用导入,而选用链接的方式,主要是有以下四种情况: 1、外部数据文件较大,超过Access数据库的最大容量 2、数据经常被其他用户或者程序修改 3、必须与其他用户或程序共享该文件...---- 下图首先演示第一种:选择外部数据选项卡--新数据库--文件--选择Excel。浏览文件名后,可以选择导入和链接两种方式,选择链接,之后步骤和导入一样。 ?...然后打开Access数据库,选择外部数据选项卡--新数据源--文件--Excel,浏览需要的文件后,选择链接的方式。 之后下一步可以发现,可以发现可以选择显示工作表,也可以显示命名区域。...今天下雨 本节介绍了Access与外部数据交换方式中的链接的方式,祝大家学习快乐,记得戴口罩,勤洗手。

    1.8K20
    领券