使用canvas给banner图片加个颜色条

lanseguhui 2019-09-08

突发奇想，给滚动的banner，每一个图片的顶部都加上一个和当前banner图片搭配的具有背景色的色条，这样做可以在不改变图片规格的情况下在移动端做到沉浸式。

技术栈

swiper 4.0 / react / canvas

大致思路是使用canvas在背后依次加载每一张图片，然后获取每一张图片左上角的第一个像素值，以此作为色条的背景色。

技术重点和难点

  • 在html模板中插入display为none的canvas元素
  • 使用promise并发加载远程图片
  • 如果图片存储到cdn上，需要在cdn配置允许跨域访问的header属性(Access-Control-Allow-Origin: 指定的域名信息或者暴力的使用*来允许所有域名访问)
  • 图片设置crossOrigin属性为anonymous，使得canvas可以读取图像数据
  • 通过componentDidUpdate生命周期控制swiper的初始化
  • 使用缓存技术，防止每次加载banner重复计算像素值

"talk is cheap, show me the code

lanseguhui

lanseguhui

相关推荐

mysql

var db = mysql.createPool(host: ‘localhost‘, user: ‘root‘,‘password‘:‘121346‘,‘database‘:‘blog‘);db.query("SELECT * FROMban

Java学习 / 0评论 2020-02-17

android实现轮播图（从互联网上寻找图片）

//设置内置样式，共有六种可以点入方法内逐一体验使用。//设置是否为自动轮播，默认是“是”。//设置指示器的位置，小点点，左中右。//以上内容都可写成链式布局，这是轮播图的监听。//必须最后调用的方法，启动轮播图。

安辉 / 0评论 2020-01-08

linux 中好玩的命令

Classic Yes classic-nodots The Classic Logo, No Periods. Classic Yes classic-simp Classic No Dots Or Letters.

Proudoffaith / 0评论 2020-01-07

轮播图的实现

--<el-carousel-item>- 前端图片展示->

csm0 / 0评论 2020-01-06

SpringBoot项目的测试类

因为CDPlayerConfig类中包含了@ComponentScan，因此最终的应用上下文中应该包含CompactDiscbean。

JackYin / 0评论 2019-12-22

Jquery淡入淡出轮播图

　　　　<li><a href="javascript:;"><img src="./1 .png" /></a></li>

tthappyer / 0评论 2019-12-02

jQuery 简易实用banner轮播图

banner轮播图是几乎每个前端都会使用到的功能，无论你是自己用javascript写还是直接用jQuery插件，一定不会陌生。但是网上各种插件是五花八门，什么花俏的功能都有，但有时候我们只需要一个简单的，只包含最少功能的banner，却很难找到。一个好的

仲崇峰 / 0评论 2016-11-29

jquery banner 轮播

Banner可以作为网站页面的横幅广告，也可以作为活动时用的标识，还可以是报纸杂志上的大标题。Banner主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。在以往很多项目中主要体现在首页、登录页中对客户的提供的图片进行展示，本文档主要介绍基本的使用

小源丶同学 / 0评论 2017-03-10

Linux　nc 命令详解

netcat是网络工具中的瑞士军刀，它能通过TCP和UDP在网络中读写数据。通过与其他工具结合和重定向，你可以在脚本中以多种方式使用它。使用netcat命令所能完成的事情令人惊讶。netcat所做的就是在两台电脑之间建立链接并返回两个数据流，在这之后所能做

阳光之吻 / 0评论 2017-08-07

Linux　nc 命令详解

netcat是网络工具中的瑞士军刀，它能通过TCP和UDP在网络中读写数据。通过与其他工具结合和重定向，你可以在脚本中以多种方式使用它。使用netcat命令所能完成的事情令人惊讶。netcat所做的就是在两台电脑之间建立链接并返回两个数据流，在这之后所能做

王道立心 / 0评论 2017-08-07

tomcat取消server信息（改变您的HTTP服务器的缺省banner）

主要解决扫描服务器中出现的 远端HTTP服务器类型和版本信息泄漏 问题。将server:Apache-Coyote/1.1 修改为 unknown 即可。附件中是修改好的jar包，可使用。

人亦有言进退维谷 / 0评论 2014-09-28

原生js + css3 + 定时器 无缝轮播图（部分）

现在自学前端中，学到移动端，在做一个项目，课程开始用原生的方法写轮播图（无缝），但是视频讲的是面向过程的方式，现在自己用面向对象的方式写一下。

zyhui / 0评论 2019-07-01

Linux Netcat 命令—超级网络工具详解

netcat是网络工具中的瑞士军刀，它能通过TCP和UDP在网络中读写数据。通过与其他工具结合和重定向，你可以在脚本中以多种方式使用它。使用netcat命令所能完成的事情令人惊讶。netcat所做的就是在两台电脑之间建立链接并返回两个数据流，在这之后所能做

atb / 0评论 2019-06-28

jquery banner 轮播

1 概述Banner可以作为网站页面的横幅广告，也可以作为活动时用的标识，还可以是报纸杂志上的大标题。Banner主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。在以往很多项目中主要体现在首页、登录页中对客户的提供的图片进行展示，本文档主要介绍基

无情 / 0评论 2017-03-10

jQuery 简易实用banner轮播图

banner轮播图是几乎每个前端都会使用到的功能，无论你是自己用javascript写还是直接用jQuery插件，一定不会陌生。

81423067 / 0评论 2016-11-29

隐藏PHP，NGINX，APACHE的banner。

ServerToken Prod;隐藏Nginx的Banner server_tokens off;如下图所示：。如果服务器跑的是nginx+php-fpm，这时候需要编辑php-fpm配置文件如fcgi.conf、fastcgi.conf，久违的403报

aikudeyu / 0评论 2012-03-16

DOM 操作

//用遍历将伪数组变成数组。//previousSibling 上一个兄弟元素。//lastChild 最后一个子元素

JackXue程序生涯 / 0评论 2019-06-27

那些年，那些坑--swiper loop：true引发绑定dom的click事件无效及解决方案

对于 swiper，只要做过轮播图的童鞋应该都再熟悉不过了。这是一个很强大的图片轮播插件，本身无任何第三方库依赖，即插即用。api 文档很清晰，所以很快能够上手。但是，再好的插件也会出现令人不愉快的地方，当然，今天所讨论的并不是插件本身的问题，只是开发者是

hzwinner / 0评论 2019-06-27

jquery如何改变html标签的样式

对于如何修饰html标签，这对于js来说，可以通过setAttribute来设置标签的属性，通过getAttribute来得到标签的属性，而在jq中当然也可以实现类似的功能，方法上肯定比js要简化多了。$.attr;//单个属性的设置。id=1113331

suis / 0评论 2015-03-13

JQuery 轮播效果

#banner {position:relative; width:478px; height:286px; border:1px solid #666; overflow:hidden; font-size:16px}. #banner ul li {

honeyth / 0评论 2014-08-28

JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图

var $btn_a = $btn.find('a') var v_width = $banner.width();var page_count = $banner_ul.find.length; //把这个值赋给小圆点的个数

DevilPace / 0评论 2014-07-18

jQuery 支持标题的banner 圆点切换 左右箭头切换 自动切换

jQuery 支持标题的banner 圆点切换 左右箭头切换 自动切换包含2个扩展演示，全屏和全一页显示多个

89203856 / 0评论 2014-07-11

Android广告图片轮播，支持无限循环和设置轮播样式、切换时间等

Banner广告图片轮播控件，支持无限循环和多种主题，可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加载框架等！很多Android APP中都有广告栏，我也用过很多次了，特来写一篇博文。

learningITwell / 0评论 2019-06-26

导航下拉菜单被banner或flash覆盖(单遮住)解决办法（css法）

z-index和父标签的position属性有关，比如a为下拉菜单的父标签，b为banner的父标签，a和b属于兄弟关系，关系如下：a > 下拉菜单b > banner此时这样设置css可以解决a下的元素被b下的banner遮罩的问题a{pos

LadyZhong / 0评论 2014-03-25

jQuery 几种不同的slide滑动banner，包括自动播放和带缩略图

本例的上 下项目用的是自定义字体。本例的案例一共有6个，演示页面左侧导航条可以看到

钱多多 / 0评论 2014-01-08

Linux Netcat 命令——网络工具中的瑞士军刀

netcat是网络工具中的瑞士军刀，它能通过TCP和UDP在网络中读写数据。通过与其他工具结合和重定向，你可以在脚本中以多种方式使用它。使用netcat命令所能完成的事情令人惊讶。netcat所做的就是在两台电脑之间建立链接并返回两个数据流，在这之后所能做

码中飞翔 / 0评论 2019-06-26

类似心跳的banner动画

transform: scale(1);transform: scale(1.15);transform: scale(1);transform: scale(1);-webkit-transform: scale(1);-webkit-transform

梦远青城 / 0评论 2013-11-04

jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

适合宽和高都比较大的页面使用。#focus { width: 320px; height: 150px; clear: both; overflow: hidden; position: relative; float: left; }. #focus .

lining / 0评论 2013-10-11

jquery左右滚动焦点图banner图片,鼠标经过显示上下页

JavaScript Code$(function(){varsWidth=$("#focus").width();varlen=$("#focusulli").length;varindex=0;varpicTim

zyb00yaonuli / 0评论 2013-10-11

锤子官网3D翻转特效banner插件

锤子官网3D翻转特效banner插件**每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的banner，感觉科技感十足 这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现 同时也将代码进行了封装，做成了可以供大家引用的插件

aqw / 0评论 2019-06-25

SEO如何做好图片优化？ 让图片优化给网站增色

一个优秀的网站要想给访客留下好的印象，不仅仅体现在措辞恰当的文字上，更重要的是需要需要优质的图片来搭配!因此在网站优化中，我们不仅要学会写原创文章，而且在图片的优化上，也需要投入足够的精力学习。本文，我将会全面的给大家讲一下，如何让图片的优化给你的网站增色

李蓝箫 / 0评论 2014-10-27

BANNER中的字体结构分析

本来想写“Advertisemen中的字体结构分析”，后来发现这个标题写得有点大，偏离了在目前工作中的针对性，因此缩小到banner的范围，以下内容仅个人在目前工作中对banner设计上的一点浅见，仅起抛砖引玉的作用。Banner的本身形状：形状决定了其固

cgnine / 0评论 2011-05-23

在webapp中判断native app是否安装并直接打开

常常有这样的场景，咱们开发出来的Native-APP需要在Web-APP中进行推广，比如在页面顶部来一张大Banner图片，亦或一张二维码。但往往我们都是直接给推广图片加了一个下载链接。所以咱们来模拟一下用户的操作步骤：。在iOS上，要增加一个APP的大B

dangai00 / 0评论 2015-08-31

HTML5公开课之显示各大型网站banner自动轮播

flowToken=1008606. flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

勤能补拙孰能生巧 / 0评论 2019-05-29

Linux下有趣的命令

10 Classic Yes classic-nodots The Classic Logo, No Periods. 11 Classic Yes classic-simp Classic No Dots Or Letters. 16 Classic Y

chuangjinweilai / 0评论 2018-05-15

Linux Netcat 命令——网络工具中的瑞士军刀

netcat是网络工具中的瑞士军刀，它能通过TCP和UDP在网络中读写数据。通过与其他工具结合和重定向，你可以在脚本中以多种方式使用它。使用netcat命令所能完成的事情令人惊讶。netcat所做的就是在两台电脑之间建立链接并返回两个数据流，在这之后所能做

zhangjianjun / 0评论 2013-04-12

JS实现点击网页判断是否安装app并打开否则跳转app store

常常有这样的场景，咱们开发出来的APP需要进行推广，比如在页面顶部来一张大Banner图片，亦或一张二维码。但往往我们都是直接给推广图片加了一个下载链接。所以咱们来模拟一下用户的操作步骤：。能看出来，不管是点击Banner还是扫描二维码的方式，对于已经安装

thinkma / 0评论 2016-11-18

jquery实现左右轮播切换效果

--左右方向按钮-->

江湖郎中 / 0评论 2018-01-01

weex里Vuex state使用storage持久化详解

在weex里使用Vuex作为state管理工具，问题来了，如何使得state可以持久化呢？weex官方提供store模块，因此我们可以尝试使用该模块来持久化state。storage 是一个在前端比较常用的模块，可以对本地数据进行存储、修改、删除，并且该数

孙将军 / 0评论 2017-09-09

jquery版轮播图效果和extend扩展

<!DOCTYPE html>. margin:0;padding:0;font-size:14px;-webkit-user-select:none;list-style:none;display:block;border:none;text

89443062 / 0评论 2017-07-18

jQuery制作全屏宽度固定高度轮播图(实例讲解)

--图片宽度和高度在css中定为1920x300-->

xxh / 0评论 2019-05-05

隐藏的banner信息，安全一点！

前言一些应用的banner信息，容易让黑客更快的匹配到漏洞信息，所以隐藏起来可以提升一定的安全性。修改 ServerIdent on "Serv-U FTP Server v5.0 for WinSock ready...". 编辑os

keweive / 0评论 2018-03-10

jQuery无缝轮播图代码

var i=0;var clone=$(".banner .img li").first().clone();$(".banner .img").append(clone);var size = $(".b

msyndra / 0评论 2016-12-22

手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效

现在好的微信微商或者微信公众号都有这种大转盘的项目，这里就整理一个，可以参考下。这是一款基于jquery和HTML5 Canvas的幸运大奖盘特效。该幸运大奖品特效支持移动端，它通过动态构造Canvas元素来生成大奖盘，并通过jquery代码来随机获取奖品

舜岳 / 0评论 2019-04-29

jQuery简单自定义图片轮播插件及用法示例

本文实例讲述了jQuery简单自定义图片轮播插件及用法。分享给大家供大家参考，具体如下：。经常使用别人的插件，现在自己写一个，纪念一下。

hehekai / 0评论 2016-11-21

jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】

本文实例讲述了jQuery实现最简单的切换图效果。分享给大家供大家参考，具体如下：。更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery

zhaoqidev / 0评论 2016-09-04

jquery实现简单的banner轮播效果【实例】

朋友给我看了一个轮播效果，把js下载一看，丫丫的一个这么简单的效果，这么的就能写个几百行的，严重影响浏览器加载速度嘛，以为人家宽带流量不要钱玩的哦。。无奈之下给他写了个简单的，把所有代码放上去都没有超过70行，还有圆角的那个CSS，不是每个浏览器都是圆角的

Gcalolin / 0评论 2019-04-25

简单的jQuery banner图片轮播实例代码

朋友给我看了一个轮播效果，把js下载一看，丫丫的一个这么简单的效果，这么的就能写个几百行的，严重影响浏览器加载速度嘛，以为人家宽带流量不要钱玩的哦。。无奈之下给他写了个简单的，把所有代码放上去都没有超过70行，还有圆角的那个CSS，不是每个浏览器都是圆角的

yongyonglsy / 0评论 2016-03-04

基于jQuery实现左右图片轮播（原理通用）

通过判断index值的大小变化来判断图片左移还是右移。通过控制图片的left值，来达到一个轮播的效果。此处为轮播主体，颜色块代替。

83991231 / 0评论 2015-12-24