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

JS获取图片随机一点颜色

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

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

    搭建随机图片API

    想法 搭建好BLOG和TECH,我一直觉得里面的随机图片很好看。依靠baidu我大概了解到这个是依靠API实现的。于是乎,我自己也想整一个(毕竟图片在自己手上用的放心捏)。...> 保存即可,通过api即可随机调用img文件夹中的图片。 使用方法 访问地址:http://你的域名/api.php就可以啦!可以选择套CDN加速!...反正就是放个图片对吧?)...不过对图片存放源的带宽有一定的要求(你也不想图片加载半天加载不出来吧~) Python 一些补充的东西(本地提取图片命名) (其实就是我自己比较懒) 我的图片放在网站根目录下的photos文件夹中,所以采用如下方式...如果你的图片放在对象存储中,则直接在TXT文件中写入每张图片的位置(一行一个)即可! 由于我自己的图片比较多,所以当我使用搭建外链的时候比较头疼——那么多图片的文件名得全部录入TXT中!

    8210

    自建随机图片api

    创建网站 打开宝塔Linux面板,在wordpress网站根目录创建一个api文件夹用来存放自己编写的接口,在api文件夹中新建一个randomimg-api文件夹用来存放随机图片的代码文件。.../imgurl.txt"); //随机读取一行 $arr = mt_rand( 0, count( $file ) - 1 ); $imgpath = trim($file[$arr]); //编码判断...> 爬取图片 图片来源:元气壁纸 源码: main.py import requests import random import bs4 from ua_info import ua_list import...访问接口,我的是随机图片api 大概是这样的效果。 补充 下载下来的图片貌似有点小有点糊,因为下下来的的是这个站点的预览缩略图,所以我们需要在imgurl.txt里面改下尺寸。...x-oss-process=image%2fresize%2cm_lfit%2cw_2560%2ch_2160 现在的效果应该好多了 图片 效果展示,这是api调用的图片

    48540

    搭建随机图片API

    摸索了一下自己又搭建了一个随机图片API (美女) ,PHP的随机图片API搭建方法有两种 本地随机图片 外链随机图片 接下来简单教一哈如何编写 文字教程 本地随机图片 首先创建一个文件夹 photos...和一个名为 api.php 的文件 然后在photos的文件夹内放图片,在api.php内编写如下代码 保存即可,通过api随机调用img文件夹中的图片,最后访问地址:http://域名/api.php就可以啦,套个CDN加速后,速度也够快,但是我认为比较耗资源,服务器内存大的随意 外链随机图片...先创建 photos.txt 和 api.php 文件 然后在photos.txt文档内放图片外链地址 (一行一个) ,在api.php加入下列代码 <?...这里photos. txt中可以填写比如新浪那些外链图片,高速稳定,而且不耗内存 接口测试 我用了第二种获取新浪外链图片的方式做了 调用方法 如果你不想搭建可直接调用我的 <img src="https

    5.2K52

    随机图片API制作教程

    之前搭建博客的时候在网上找了一个导航页面,每次进入导航时背景图片都不一样,看了一下代码了解到是通过api接口随机获取的图片,但是使用过程中发现网页图片加载比较慢,就想着自己做一个api放自己服务器上。...这里记录一下api制作过程 图片准备 首先我们在我们web服务器上(必须有php环境)网页根目录创建一个api/img目录,然后将我们找来的图片放到这个img文件夹里,然后我们需要将这些图片按照顺序重命名...,重命名成1.jpg,2.jpg的格式(别的类型的图片也可以,但是一定要统一类型)。...> 你需要把代码上面的100改成你的图片数量,把youxuanw.vip改成你的网站URL,把jpg改成你图片的扩展名 现在我们就可以通过访问http://你网站的URL/api/img.php调用你的...API了 PS:如果你不想要这种返回随机图片URL的API ,你可以通过重定向改成直接返回随机图片的API(看不懂的话就直接把下面的代码覆盖到img.php中),代码如下 <?

    1.6K40

    简易的随机图片API

    图片需要按顺序命名,图片多了重命名比较麻烦; 每次新增图片都需要去修改代码。 所以,我对代码进行了一下修改: <?...php $dir = 'images'; //图片存放目录 $arr = scandir($dir); //列出目录下所有的文件 array_splice($arr,0,2);...代表当前目录和上一级目录 shuffle($arr); //把数组中的元素按随机顺序重新排列 $image=$arr[0]; //读取重新排列后的数组中的第一个元素 Header...> 还是和之前一样,在站点目录下新建一个目录 images,然后将所有的图片放置在这个目录下。scandir() 会列出 images 目录中的文件和目录。...这样图片的命名就可以随意了,同时新增图片也只需要上传图片到 images 目录下即可。 有写好了的,愿意公开给其他人使用的可以在评论区留下地址。

    62330

    JS 图片压缩

    前言 说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,...文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?...压缩思路 涉及到 JS图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...,后续会有详细介绍 转换后的图片生成对应的新图片,然后输出 优缺点介绍 不过 Canvas 压缩的方式也有着自己的优缺点: 优点:实现简单,参数可以配置化,自定义图片的尺寸,指定区域裁剪等等。...上传存储图片如果需要对文件大小格式有要求的,可以统一压缩处理图片 前台页面想要编辑图片,可以在 Canvas 处理图片的时候,加一些其他逻辑,例如添加文字,剪裁,拼图等等操作 当然温馨提示:因部分接口有

    25.8K21

    使用PHP实现随机调用图片

    本文将演示如何使用PHP来实现随机调用图片,为你呈现每次加载时都有不同图片的效果。...步骤1:准备图片资源 首先,确保你有一些图片资源,它们可以存放在一个文件夹内,可以命名为image,图片格式可以是JPEG、PNG等。...步骤2:创建PHP脚本 创建一个index.php的PHP文件,用于处理随机调用图片的逻辑。 图片文件夹路径 获取图片文件列表 过滤掉"."和".."...目录 随机选择一张图片 图片显示 步骤3:部署代码 将完成后的index.php文件上传至你的Web服务器,确保文件路径和图片文件夹路径正确。...刷新页面会展示不同的随机图片,大家可以用我的url测试看看:game.haiyong.site/imgapi/ 结论 通过这个更简单的示例,我们演示了如何使用PHP来实现随机调用图片的功能。

    7210

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券