js 图像操读取图像属性

最新推荐文章于 2023-07-24 11:35:11 发布
最新推荐文章于 2023-07-24 11:35:11 发布
阅读量2.2k 收藏 1
点赞数
文章标签： imagelist image javascript border
1 读取图像属性
  1. <script language="JavaScript">
  2.        myImage = new Image;
  3.        myImage.src = "Tellers1.jpg";
  4. </script>


<img src="image1.jpg" name="myImage">
<a href="#" onClick="window.alert(document.myImage.width)">Width</a>

2 动态加载图像
  1. <script language="JavaScript">
  2.        rollImage = new Image;
  3.        rollImage.src = "rollImage1.jpg";
  4.        defaultImage = new Image;
  5.        defaultImage.src = "image1.jpg";
  6. </script>

3 简单的图像替换

<a href="myUrl" onMouseOver="document.myImage.src = rollImage.src;"onMouseOut="document.myImage.src = defaultImage.src;">
       <img src="image1.jpg" name="myImage" width=100 height=100 border=0>
</a>

4 随机显示图像

  1. <script language="JavaScript">
  2.        var imageList = new Array;
  3.        imageList[0] = "image1.jpg";
  4.        imageList[1] = "image2.jpg";
  5.        imageList[2] = "image3.jpg";
  6.        imageList[3] = "image4.jpg";
  7.        var imageChoice = Math.floor(Math.random() * imageList.length);
  8.        document.write('<img src="’ + imageList[imageChoice] + '">');
  9. </script>

5 函数实现的图像替换

  1. <script language="JavaScript">
  2.        var source = 0;
  3.        var replacement = 1;
  4.        function createRollOver(originalImage,replacementImage) {
  5.              var imageArray = new Array;
  6.              imageArray[source] = new Image;
  7.              imageArray[source].src = originalImage;
  8.              imageArray[replacement] = new Image;
  9.              imageArray[replacement].src = replacementImage;return imageArray;
  10.              }
  11.        var rollImage1 = createRollOver("image1.jpg","rollImage1.jpg");
  12. </script>

<a href="#" onMouseOver="document.myImage1.src = rollImage1[replacement].src;"onMouseOut="document.myImage1.src = rollImage1[source].src;">
       <img src="image1.jpg" width=100 name="myImage1" border=0>
</a>

6 创建幻灯片

<head>

  1. <script language="JavaScript">
  2.        var imageList = new Array;
  3.        imageList[0] = new Image;
  4.        imageList[0].src = "image1.jpg";
  5.        imageList[1] = new Image;imageList[1].src = "image2.jpg";
  6.        imageList[2] = new Image;imageList[2].src = "image3.jpg";
  7.        imageList[3] = new Image;imageList[3].src = "image4.jpg";
  8.        function slideShow(imageNumber) {
  9.              document.slideShow.src = imageList[imageNumber].src;
  10.              imageNumber += 1;if (imageNumber < imageList.length) {window.setTimeout("slideShow(" + imageNumber + ")",3000);}
  11.        }
  12. </script>

</head><body onLoad="slideShow(0)"><img src="image1.jpg" width=100 name="slideShow">

7 随机广告图片

  1. <script language="JavaScript">
  2.        var imageList = new Array;
  3.        imageList[0] = "image1.jpg";
  4.        imageList[1] = "image2.jpg";
  5.        imageList[2] = "image3.jpg";
  6.        imageList[3] = "image4.jpg";
  7.        var urlList = new Array;
  8.        urlList[0] = "http://some.host/";
  9.        urlList[1] = "http://another.host/";
  10.        urlList[2] = "http://somewhere.else/";
  11.        urlList[3] = "http://right.here/";
  12.        var imageChoice = Math.floor(Math.random() * imageList.length);
  13.        document.write('<a href="’ + urlList[imageChoice] + '"><img src="’ + imageList[imageChoice] + '"></a>');
  14. </script>


 

ashou706
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Js读取图像的元数据
05-03
在处理图像时，Js不仅可以用于显示、操作图片，还可以读取图像的元数据。图像元数据包含了关于图像的各种信息，如拍摄时间、相机型号、地理位置、曝光参数等，这些数据通常存储在图像文件的EXIF（Exchangeable Image...
JavaScript实现异步图像上传功能
10-18
接着，利用HTML5的FileReader API读取图像文件，将其转化为Base64编码的数据URL。这样，我们可以在`<img>`元素中直接使用这个Base64编码的URL显示图像，而无需等待服务器的反馈。 以下是实现这一过程的步骤： 1. *...
js,jquery获取图片的src属性并生成数组
weixin_41641581的博客
03-23 5541
//js获取图片的src属性并生成数组var imgSrcs = []; var img = document.getElementsByTagName('img') for(i=0;i&lt;img.length;i++){ var imgSrc = document.getElementsByTagName('img')[i].src;...
04 JS通过图片连接获取图片的尺寸大小
X北辰北的博客
04-10 2268
问题描述 项目中有这样一个需求，就是从后台返回了一个图片的链接，然后前端要将这个图片叠加到地图上。在实现这个需求的时候，需要获取到不同图片的尺寸大小，关于图片的尺寸大小后台是没有返回的，只有通过前端去获取，下面介绍下如何获取。 解决方法 1、通过查阅资料，找到了下面这种切实可行的方法。其实就是实例化一个Image对象，然后将这个对象的src属性赋值为图片链接，最后通过对象的width和...
JavaScript 实现提取富文本中图片的 src 属性值
最新发布
编程洪同学
07-24 977
给定一段富文本字符串，使用 JavaScript 编写一个方法，传入该字符串，返回包含图片 src 属性值的字符数组
js获取图片base64
m0_46911343的博客
04-11 3525
最近遇到了一个需求，要求在python的selenium自动化打开的浏览器中，执行js代码，实现获取图片的base64，并返回给python变量。看似很简单的一个需求，实际上包含了很多js相关的知识点和开发上的技术点。今天这篇文章，主要写写整个过程中有用的知识点。本文通过笔者在js获取图片base64的过程中，遇到的问题。canvas绘图需要修改画布大小，否则无法画完整。canvas的drawimage函数，需要等待图片加载完成，否则就会直接返回画布。
JS获取img图片的原始尺寸高度和宽度
彭世瑜的博客
05-18 2万+
目录方式一：obj.style.width方式二：width/height方式三：offsetWidth/clientWidth方法四： getComputedStyle和 currentStyle方式五：Image对象方法六：naturalWidth方式七：兼容写法 方式一：obj.style.width 通过img对象的style属性获取，如果没有设置style，将返回空 <img class="image" style="width: 100px; height: 200px;
JavaScript使用readAsDataURL读取图像文件
10-19
<title>JavaScript读取图像文件 <script type="text/javascript"> function ProcessFile(e) { var file = document.getElementById('file').files[0]; if (file) { var reader = new FileReader(); reader....
使用 javascript 提取图像颜色
03-13
这个过程通常涉及到读取图像数据，然后解析每个像素的颜色信息。在这个场景中，我们可能会使用HTML5的Canvas API，它提供了一种强大的方式来操作图像。让我们深入探讨一下如何实现这个功能。 首先，我们需要一个...
js读取jpg图片扩展信息，处理二进制数据
hbjiankely的博客
07-24 1401
js 读取图片私有扩展信息，处理二进制数据
html5通过javascript预览图片以及获取图片属性
08-13
NULL 博文链接：https://newbee-zc.iteye.com/blog/2309381
JavaScript Chrome浏览器获取本地图片的属性
11-14
Chrome浏览器验证图片格式,因为Chrome本身限制url不能为本地路径,所以验证图片格式时无法获取到图片的信息.
javascript获取、设置修改img的src属性（get/setAttribute）
热门推荐
weixin_45673401的博客
04-07 4万+
在开发网站过程中，事先就设置好了图片img的src性，一般来说很少修改这个属性，网站加载时直接显示事先设置好的图片。但如果网页要求实现滚屏加载图片（动态加载图片），也就是一次不显示网页内的所有图片，当滚动屏幕时再显示进入屏幕区的图片。这样不但可以减少对服务器的请求次数，而且能大大节省服务器的流量。 滚屏加载图片事先把网页内要动态显示图片的所有src属性设置为一张小图，待要显示目标图片时再把src属...
js实现图片上传-以及获取图片宽高、大小获属性
qq_41260655的博客
03-23 3590
前言：作为前端开发人员，避免不了上传一些文件和图片，那么什么格式需要前端后协商，同时考虑实施性，能否最有效和最合适取决于格式。自己总结了一下，不敢打包票一定准确，如果错误欢迎指正！ 文件图片上传 1、利用FormData图片/文件上传-----以文件的形式上传 //上传单个文件 upLoadFile(event) { ​ let file = event.target.files; ​ let _this = this ​ let formData = new.
js从服务器读取图片属性
qq_35845339的博客
10-10 2792
图片已经上传到了文件服务器; image的src指向图片的服务器url; 然后onload图片信息 image.onload = function(){}
JS读取图片属性的代码
xieronghua246的博客
10-28 916
 &lt;title&gt; 文件上传前台控制检测程序 v0.6 &lt;/title&gt; &lt;style&gt; body,td{font-size:12px;} &lt;/style&gt; &lt;script language=javascript&gt; /*---------------------------------------- 文件上传前台控制检测程序 v0.6 远程...
js获取image中src属性的方法语句
weixin_30566063的博客
07-20 2197
js中获取image的src值的语句： var path = $('#suolue').attr('src'); var path = document.getElementById("suolue").src; var path = $("#suolue")[0].src; 以上三种方法都可以，具体输出内容可以alert()出来调试一下就知道啦~ 转载于:https://w...
js的Image对象属性的简单认识
前端小白
07-10 1万+
说来也惭愧，从接触前端开发以来，一直都在运用jQuery，因为jquery用起来确实是给我们的前端工作带来很大的便利，以至于忽略了对创造出jquery的始祖javascript学习（可能对我这样的前端小白来说都对javascript存在着一定的恐惧。），现在终于下定决心好好啃原生js这块知识。下面是最近自己在学习js基础知识时的一些总结，归纳起来帮助自己记忆了解的同时也希望可以给跟我一样的初学者一
JS判断图片的属性
sdlcn的专栏
05-22 2556
            模板管理          新建模板          添加模板          提示:                                 模板名称                   模板文件                        选择区域                  A                   B                
js读取png图像中元数据
06-09
要读取PNG图像中的元数据，可以使用JavaScript中的第三方库，例如exif-js或piexifjs。这些库提供了读取PNG文件中元数据的方法。 以下是使用exif-js库读取PNG文件中元数据的示例代码： ```javascript // 加载PNG...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值