JavaScript 学习笔记 - 4 处理图像

已于 2022-12-08 17:17:53 修改
阅读量412 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 学习 前端
于 2022-12-08 17:13:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24951479/article/details/128237688
版权

目录

在这里插入图片描述

4.1 创建翻转器

<!DOCTYPE html>
<html>
<head>
<title>A Simple Rollover</title>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<a href="next.html" onmouseover="document.images['arrow'].src='images/arrow_on.gif'" onmouseout="document.images['arrow'].src='images/arrow_off.gif'"><img src="images/arrow_off.gif" id="arrow" alt="arrow"></a>
</body>
</html>
  1. <a href=“next.html”
    链接首先指定当用户单击图像时，浏览器将转到哪里，在这个示例中是 next.html 页面。
  2. οnmοuseοver=“document.images[‘arrow’].src=‘images/arrow_on.gif’”
    当用户将鼠标移动到图像上时（ id 为 arrow 的 src）， images 目录中的替换图像 arrow_on.gif 被写
    到文档窗口中。
  3. οnmοuseοut=“document.images[‘arrow’].src=‘images/arrow_off.gif’”
    当鼠标移走时， arrow_off.gif 图像重新显示。
  4. <img src=“images/arrow_off.gif” id=“arrow” alt="arrow"图像链接为页面定义原始图像的来源

4.2 创建更有效的翻转器

<!DOCTYPE html>
<html>
<head>
<title>A More Effective Rollover</title>
<script src="script02.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<a href="next1.html"><img src="images/button1_off.gif" alt="button1" id="button1"></a>&nbsp;&nbsp;
<a href="next2.html"><img src="images/button2_off.gif" alt="button2" id="button2"></a>
</body>
</html>

window.onload = rolloverInit;
function rolloverInit() {
for (var i=0; i<document.images.length; i++) {
if (document.images[i].parentNode.tagName == "A") {
setupRollover(document.images[i]);
}
}
}
function setupRollover(theImage) {
theImage.outImage = new Image();
theImage.outImage.src = theImage.src;
theImage.onmouseout = function() {
this.src = this.outImage.src;
}
theImage.overImage = new Image();
theImage.overImage.src = "images/" + theImage.id + "_on.gif";
theImage.onmouseover = function() {
this.src = this.overImage.src;
}
}

在这里插入图片描述

4.3 构建三状态翻转器

window.onload = rolloverInit;
function rolloverInit() {
for (var i=0; i<document.images.length;i++) {
if (document.images[i].parentNode.tagName == "A") {
setupRollover(document.images[i]);
}
}
}
function setupRollover(theImage) {
theImage.outImage = new Image();
theImage.outImage.src = theImage.src;
theImage.onmouseout = function() {
this.src = this.outImage.src;
}
theImage.clickImage = new Image();
theImage.clickImage.src = "images/" + theImage.id + "_click.gif";
theImage.onclick = function() {
this.src = this.clickImage.src;
}
theImage.overImage = new Image();
theImage.overImage.src = "images/" + theImage.id + "_on.gif";
theImage.onmouseover = function() {
this.src = this.overImage.src;
}
}

theImage.onclick = function() {
this.src = this.clickImage.src;
}

4.4 由链接触发翻转器

在这里插入图片描述

window.onload = rolloverInit;
function rolloverInit() {
for (var i=0; i<document.links.length; i++) {
var linkObj = document.links[i];
if (linkObj.id) {
var imgObj = document.getElementById(linkObj.id + "Img");
if (imgObj) {
setupRollover(linkObj,imgObj);
}
}
}
}
function setupRollover(theLink,theImage) {
theLink.imgToChange = theImage;
theLink.onmouseout = function() {
this.imgToChange.src = this.outImage.src;
}
theLink.onmouseover = function() {
this.imgToChange.src = this.overImage.src;
}
theLink.outImage = new Image();
theLink.outImage.src = theImage.src;
theLink.overImage = new Image();
theLink.overImage.src = "images/" + theLink.id + "_on.gif";
}

theLink.onmouseover = function() {
this.imgToChange.src = this.overImage.src;

4.5 让多个链接触发一个翻转器

window.onload = rolloverInit;
function rolloverInit() {
for (var i=0; i<document.links.length; i++) {
var linkObj = document.links[i];
if (linkObj.className) {
var imgObj = document.getElementById(linkObj.className);
if (imgObj) {
setupRollover(linkObj,imgObj);
}
}
}
}
function setupRollover(theLink,textImage) {
theLink.imgToChange = textImage;
theLink.onmouseout = function() {
this.imgToChange.src = this.outImage.src;
}
theLink.onmouseover = function() {
this.imgToChange.src = this.overImage.src;
}
theLink.outImage = new Image();
theLink.outImage.src = textImage.src;
theLink.overImage = new Image();
theLink.overImage.src = "images/" + theLink.id + "Text.gif";
}
  1. if (linkObj.className) {
    var imgObj = document.getElementById(linkObj.className);
    无法使用翻转图像的 id 计算出改变过的图像的 id，这是因为 id 必须是唯一的，而所有翻转图像必须为改变过的图像的目的地提供同样的值。因此，我们要使用 class 属性（因为多个页面元素可以共享同一个 class）。在这一行上，寻找链接对象的 className。72 第 4 章 处理图像
  2. function setupRollover(theLink, textImage) {
    theLink.imgToChange = textImage;我们将当前链接对象（ theLink）和图像对象（我们称之为 textImage）传递给 setupRollover()函数。注意，在传递这些对象（也可以称为变量）时，分别将它们称为 linkObj 和 imgObj。脚本其余部分的工作方式与本章前面的示例相同。

4.6 处理多个翻转器

function setupRollover(thisLink,textImage) {
theLink.imgToChange = new Array;
theLink.outImage = new Array;
theLink.overImage = new Array;
theLink.imgToChange[0] = textImage;
theLink.onmouseout = rollOut;
theLink.onmouseover = rollOver;
theLink.outImage[0] = new Image();
theLink.outImage[0].src = textImage.src;
theLink.overImage[0] = new Image();
theLink.overImage[0].src = "images/" + theLink.id + "Text.gif";
var rolloverObj = document.getElementById(theLink.id + "Img");
if (rolloverObj) {
theLink.imgToChange[1] = rolloverObj;
theLink.outImage[1] = new Image();
theLink.outImage[1].src = rolloverObj.src;
theLink.overImage[1] = new Image();
theLink.overImage[1].src = "images/" + theLink.id + "_on.gif";
}
}
function rollOver() {
for (var i=0; i<this.imgToChange.length; i++) {
this.imgToChange[i].src = this.overImage[i].src;
}
}
function rollOut() {
for (var i=0; i<this.imgToChange.length; i++) {
this.imgToChange[i].src = this.outImage[i].src;
}
}

theLink.imgToChange = new Array;
theLink.outImage = new Array;
theLink.overImage = new Array;

4.7 创建循环的广告条

window.onload = rotate;
var theAd = 0;
var adImages = new Array("images/reading1.gif","images/reading2.gif","images/reading3.gif");
function rotate() {
theAd++;
if (theAd == adImages.length) {
theAd = 0;
}
document.getElementById("adBanner").src = adImages[theAd];
setTimeout(rotate, 3 * 1000);
}

在这里插入图片描述
2. setTimeout(rotate, 3 * 1000);
这一行告诉脚本每隔多长时间改变广告条中的 GIF。可以使用内置的 JavaScript 命令 setTimeout
指定一个操作应该间隔多长时间执行一次（时间的单位是毫秒）。在这个示例中，每 3000 毫秒（即 3秒）调用一次 rotate()函数，所以广告条中的 GIF 每 3 秒改变一次

4.8 在循环广告条中添加链接

在这里插入图片描述

window.onload = initBannerLink;
var theAd = 0;
var adURL = new Array("negrino.com","sun.com","microsoft.com");
var adImages = new Array("images/banner1.gif","images/banner2.gif","images/banner3.gif");
function initBannerLink() {
if (document.getElementById("adBanner").parentNode.tagName == "A") {
document.getElementById("adBanner").parentNode.onclick = newLocation;
}
rotate();
}
function newLocation() {
document.location.href = "http://www." + adURL[theAd];
return false;
}
function rotate() {
theAd++;
if (theAd == adImages.length) {
theAd = 0;
}
document.getElementById("adBanner").src = adImages[theAd];
setTimeout(rotate, 3 * 1000);
}

4.9 建立循环式幻灯片

Web 站点上的幻灯片每次向用户显示一个图像，并且让用户能够控制显示图像的进度（既可以向
前，也可以向后）。

window.onload = initLinks;
var thePic = 0;
var myPix = new Array("images/robot1.jpg","images/robot2.jpg","images/robot3.jpg");
function initLinks() {
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
}
function processPrevious() {
if (thePic == 0) {
thePic = myPix.length;
}
thePic--;
document.getElementById("myPicture").src = myPix[thePic];
return false;
}
function processNext() {
thePic++;
if (thePic == myPix.length) {
thePic = 0;
}
document.getElementById("myPicture").src = myPix[thePic];
return false;
}

4.10 显示随机图像

window.onload = choosePic;
var myPix = new Array("images/lion.jpg","images/tiger.jpg","images/bear.jpg");
function choosePic() {
var randomNum = Math.floor (Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[randomNum];
}

var randomNum = Math.floor (Math.random() * myPix.length);

4.11 随机开始循环显示图像

window.onload = choosePic;
var theAd = 0;
var adImages = new Array("images/reading1.gif","images/reading2.gif","images/reading3.gif");
function choosePic() {
theAd = Math.floor(Math.random() * adImages.length);
document.getElementById("adBanner").src = adImages[theAd];
rotate();
}
function rotate() {
theAd++;
if (theAd == adImages.length) {
theAd = 0;
}
document.getElementById("adBanner").src = adImages[theAd];
setTimeout(rotate, 3 * 1000);
}

theAd = Math.floor(Math.random() * adImages.length);
rotate();

Helloworld188888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript与图像处理
吃不胖.
07-28 438
Fabric.js是一个强大的JavaScript图像库，它提供了丰富的API，可以帮助我们轻松地创建和处理2D图像。使用Fabric.js，我们可以创建不同形状的图像、添加文本、设置样式等。Pixi.js是一个快速、轻量级的2D渲染引擎，它可以帮助我们创建高性能的Web图像。JavaScript图像处理库和框架可以帮助我们创建图像编辑器，用户可以使用该编辑器进行图像的剪裁、旋转、调整颜色等操作。例如，使用Pixi.js可以创建高性能的2D游戏，使用Three.js可以创建3D游戏。
js-image-processors:JavaScript 中的实验性照片处理算法
06-16
js-图像处理器 JavaScript 中的实验性照片处理算法 该存储库不包含任何可以在项目之间分发和重用的代码，而仅包含一组实验。 运行测试页面 你不会用 node.js 和 npm 来解决依赖关系。 您可以通过 npm 安装 Grunt（用于运行 Gruntfile.js 中定义的构建任务）： npm install grunt-cli -g 您可以使用以下任务在 localhost:3000 上为带有实验的页面提供服务 grunt start 一些笔记 其中一些过滤器需要大量处理，该工具用于即时测试和调整，并生成可在本地保存并在其他项目中使用的高分辨率图像。
【JavaScript脚本宇宙】玩转图像处理：从基础到高级，这些库你不能错过！
最新发布
记录我的学习历程
06-18 1583
本文介绍了多个JavaScript图像处理库，涵盖了从基本的图像操作到复杂的图像特效处理。每个库都有其独特的功能和特点，可以根据具体需求选择适合的工具。同时，还提供了使用示例和优缺点分析，以帮助读者更好地理解和选择合适的库。
nodejs处理图片的几种方法,使用sharp，jimp，webconvert
zrc_xiaoguo的博客
10-24 6380
Sharp是一款快速高效的Node.js图片处理库，支持图片格式转换、尺寸调整、压缩、裁剪、旋转、水印等功能。
js 图片处理
qq_47133985的博客
08-16 1078
我写的传入参数为文件类型 一般为用户上传选中的文件 也可以是其他形式 但是要修改一些代码使图片参数可以写入到img中 因为最终目的是要把图片画在canvas上。最后canvas导出的0.4 指的应该是图片的色彩质量(具体了解比较少)这个参数不影响图片精度 只会让图片的色彩对比度很差。注:这里的参数是图片的路径 当然也是可以改的 因为最终目的还是要画到canvas里。画布的大小也对生成图片质量影响很大 这里我定画布的大小时原图的1/4。图片的处理过程是个异步过程 压缩后的文件resolve出去了。...
JavaScript学习笔记之图片库案例分析
12-04
本文实例讲述了JavaScript图片库。分享给大家供大家参考，具体如下： 一、一个javascript 图片库实例，下面是效果图 点击顶部导航，会在本页面进行刷新图片，然后，在底部会显示文本的变化 二、下面是代码 1、...
JavaScript学习笔记整理_关于表达式和语句
11-23
它执行其操作数但忽略结果，通常用于创建无操作的链接（`<a>` 的 `href="javascript:void(0)"`）以防止页面跳转，或者填充图像源（`<img>` 的 `src="javascript:void(0)"`）以避免发送请求。此外，`void` 还可以用于...
JavaScript学习笔记-适合初学者
09-28
本学习笔记专为初学者设计，旨在帮助新接触JavaScript的人快速掌握这门语言的核心概念和实用技巧。 首先，"JavaScript特效.chm"可能是一份关于JavaScript实现的各种网页特效的教程。这些特效可能包括图片轮播、下拉...
Ruffy javascript 学习笔记
12-02
在Ruffy的JavaScript学习笔记中，主要涉及了几个关键概念：原型模型、继承、CSS盒模型、图像处理、反射机制、HTML表格属性以及Base64编码。 1. **JavaScript的原型模型**：在JavaScript中，对象可以通过构造函数...
js 图像处理
u012557298的专栏
12-08 479
jpg像素应该是rpg、channel值，其他图片应该也是这样的，图片存储为图片在读取。加载代码，由于img没有onload，所以image.width一直是0。
css样式的常用特效
06-05
一些常见的css常用特效，比较有意思！可以看看！
13款JavaScript图像处理库，建议收藏备用
六六的小帅的博客
05-19 3570
JavaScript库
[ TS 类型体操 ] 初体验之 Tuple to Object， Tuple to Union 与 Tuple to Nested Object
军火库
10-17 566
它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
js压缩图片
jstljspservlet的博客
10-22 258
// clone https://github.com/Tencent/weui.js/blob/master/src/uploader/image.js // updated by cube-ui /* * Tencent is pleased to support the open source community by making WeUI.js available. * * Copyr...
JavaScript学习（三十一）——图像处理
苦作舟的空城机
02-16 2649
图像是Web页面的一大组成部分，如果一个网页只存在文本、表格以及单一的颜色来表达是不够的。JavaScript提供了图像处理的功能。 Image对象 在网页中使用图片非常普遍，只需要在HTML文件中使用&lt;img&gt;标记，并将其中的src属性设置为希望显示图片的URL即可。 图片的属性表： 属性 说明 border 表示图片边界宽度，以像素为单位 height ...
JavaScript图片处理大揭秘！掌握文件流处理方法
Twinkle_sone的博客
11-30 1199
💻作为一名前端开发，我们平时也少不了对文件流数据进行处理，今天简单整理一下日常开发中比较常见的一些处理文件流的场景及处理方法，希望可以帮助到大家，挤出多一点的~~摸鱼~~学习时间。
js关于图片的操作（压缩等）
liuhao9999的博客
05-20 546
export default class ImageCompress { constructor(file, fileSize, maxWH = 1920) { this.file = file this.fileSize = fileSize this.maxWH = maxWH // 最大长宽 } compress() { // 压缩 const fileType = this.file.type const fileSize = this.
js对图片的处理
luozochuan的博客
12-09 1547
upload组件： <el-upload class="upload-demo" action="#" :file-list="formData.yingYongTB" :on-change="getFile" :auto-upload="false" l.
前端学习笔记 javascript
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值