HTML5
文章平均质量分 69
html5
I-T枭
这个作者很懒,什么都没留下…
展开
-
uniapp动态修改样式_Vue如何动态修改CSS变量
想要动态修改css样式就得能动态的给<style></style>赋值,可是<style></style>里面又写不了变量(有可能可以但是我不会。。),所以想了个这种办法,通过给模板文件的:style动态复制从而间接的修改<style></style>里面的变量<template> <div :style="{'--color':'red'}"></div></templat...原创 2021-07-06 17:02:22 · 4375 阅读 · 0 评论 -
canvas跨域绘画图片
尽管不通过 CORS 就可以在 Canvas 画布中使用图片,但是这会污染画布。一旦画布被污染,你就无法读取其数据。例如,你不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法,调用它们会抛出安全错误。这种机制可以避免未经许可拉取远程网站信息而导致的用户隐私泄露。HTML 规范中图片有一个 crossorigin 属性,结合合适的 CORS 响应头,就可以实现在画布中使用跨域 <img> 元素的图像。crossOrigin/CORS原创 2021-04-26 15:43:28 · 644 阅读 · 0 评论 -
h5-video自动播放兼容性处理
综上所述:pc端加muted基本浏览器都兼容 ios端加muted 除uc与QQ,微信,其余兼容 android端加 muted 基本浏览器都兼容原创 2021-03-15 14:51:56 · 2733 阅读 · 0 评论 -
canvas绘图按照contain或者cover方式适配并居中显示
canvas绘图时drawImage,需要绘制的图片大小不同,比例各异,所以就需要像html+css布局那样,需要contain和cover来满足不同的需求。contain保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。图片按照contain模式放到固定盒子的矩形内,则需要对图片进行一定的缩放。原则是:如果图片宽高不等,使图片的长边能完全显示出来,则原图片高的一边缩放后等于固定盒子对应的一边,等比例求出另外一边,如果图片宽高相等,则根据固定盒子的宽原创 2021-02-08 16:06:06 · 796 阅读 · 1 评论 -
微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)
此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件:$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});ordocument.addEventListener('touchmove', function(e){e.preventDefault()}, false);但这样往...原创 2018-08-27 22:33:26 · 1846 阅读 · 0 评论 -
DataURL, Blob, File, Image之间的关系与转换
使用前景:移动端上传拍照图片太大,使用canvas压缩后base64=>blob二进制表单文件=>ajax-POST上传// canvas转dataURL:canvas对象、转换格式、图像品质function canvasToDataURL(canvas, format, quality) { return canvas.toDa...原创 2018-06-07 10:46:05 · 7676 阅读 · 3 评论 -
生产海报插件
vue canvas 生成微信分享海报前言小可爱们是不是还在为画Canvas 而烦恼,是不是心烦各式各样的分享图如何快速生成。使用Vue Canvas Poster 你可以用简单的css属性按照一定的规范画出Canvas图。比如你可以写一段文字,给它设置大小颜色对齐方式,你也可以画出一张图片,设置如何裁剪,你甚至可以画出渐变的矩形,给它设置边框,圆角。Vue Canvas Poster ????&主要特性: 绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗)原创 2020-12-10 17:56:18 · 258 阅读 · 0 评论 -
微信浏览器缓存怎么清理?
微信浏览器缓存怎么清理?用微信内置浏览器打开这个网页debugx5.qq.com 或http://debugtbs.qq.com/来自网络:大家知道,做微信公众号和调试手机页面的时候,避免不了页面要跳转到微信浏览器打开,调试阶段,android版微信浏览器一直都默认缓存html静态资源,每次静态资源变化甚至新内容发布的时候在微信浏览器上都极有可能不能更新,很多时候要清理微信缓存才能看到效果,很是烦人。部分客户装了QQ浏览器,微信实际调用的是QQ浏览器,有时候甚至光清理微信缓存都无效,QQ浏览器.原创 2020-07-22 14:56:02 · 1886 阅读 · 0 评论 -
移动端video标签自动播放(兼容ios,微信)
页面使用如下:使用如上方法之后在其他端都可正常播放,只有iOS没办法自动播放,于是就Google开始寻找方法最后找到方法如下:<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered video" muted autoplay preload loop x5-video-player-fullscreen="true" x5-playsinline原创 2020-11-20 13:58:46 · 10520 阅读 · 2 评论 -
移动端吸顶效果(小程序,h5)
前言:实例源码:#sticky-nav { position : sticky ; top : 100px ;}原创 2020-11-16 17:43:52 · 1247 阅读 · 0 评论 -
chrome调试h5移动端(含android,ios)
chrome调试h5移动端chrome调试(window+android)需要条件:1.安卓开发人员需要对你页面调试得webview添加setWebContentsDebuggingEnabled得静态方法。 2.windows电脑可以爬~梯子或者安装chrome-inspect离线开发者工具包 梯~子工具:https://cp.greennode.info chrome-i...原创 2020-11-10 10:27:49 · 3720 阅读 · 0 评论 -
mac 给 iPhone 充电一直闪跳
mac 给 iPhone 充电一直闪跳解决iPhone连上MAC之后会不断地断开又连上,断开又连上问题。 sudo killall -STOP -c usbd不会对mac 产生其他影响!再次声明,不要随便将我文章拉入,什么专题之类的!详细步骤:使用: control + 空格 同时按下; 2.在步骤一后,会出现一个搜索框,输入terminal(终端)直接回车键; 3.步骤2后,进入终端,将 sudo killall -STOP -c usbd 复制进去,回车-》输入密码-》回车-》就ok原创 2020-10-20 10:47:58 · 1158 阅读 · 0 评论 -
获取视频第一帧作为封面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.n.原创 2020-09-24 10:12:28 · 3249 阅读 · 0 评论 -
前端如何在H5页面调起微信支付
在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用内置对象方法比较简单。这里讲的只是前端要做的事情,整个微信支付还有多一半的工作量需要后台去实现,这里就不讲了。方法一(利用内置对象):function onBridgeReady(){W...转载 2018-09-16 14:52:41 · 44170 阅读 · 3 评论 -
看完让你彻底搞懂Websocket原理
偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有。所以转到我博客里,分享一下。比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗,纯粹为分享。废话这么多了,最后再赞一个~一、websocket与httpWebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接...转载 2018-09-13 09:52:30 · 150 阅读 · 0 评论 -
h5中类jQuery选择器querySelector的使用
转载自http://www.cnblogs.com/Wayou/p/html5_web_api_queryselector.html简介HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。...原创 2018-09-11 22:51:39 · 405 阅读 · 0 评论 -
【基础】这15种CSS居中的方式,你都用过哪几种?
简言CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。1 水平居中1.1 内联元素水平居中利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(i...原创 2018-09-10 23:58:45 · 299 阅读 · 0 评论 -
移动端ios 输入框fixed固定在底部 焦点时乱跳加遮盖问题的解决 转自zhangyunling 加个人项目解决方案
如果您有过移动端的开发经验,那么您是否碰到过这样的问题,一个页面有输入框,当这个输入框聚焦时,输入框在IOS下,被移动到手机屏幕的当中去了,而在Android端,有些浏览器的输入框,会被键盘盖住。1:前言接下来就以最常见的顶部和底部固定输入框来看一下,问题的来源,以及折中的解决方案输入区域,在移动端基本上,只用于三种情况1:固定在顶部的2:固定在底部的3:在文档流中的我...转载 2018-09-10 11:46:10 · 1382 阅读 · 0 评论 -
react如何使用base64图片
原图如下:var baseImg='data:image/png;base64,图片base64编码' <img src={img_base} style={{ width: 130, height: 'auto', borderRadius: 30,margin:'0 auto',display:'block'}} />使用react-base64后效果图如下:so easy!...原创 2018-06-07 11:46:12 · 11359 阅读 · 5 评论 -
window属性:devicePixelRatio
devicePixelRatio属性该 Window 属性 devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。此值也可以解释为像素大小的比率:一个 CSS 像素的大小与一个物理像素的大小的比值。简单地说,这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个 CSS 像素。这在处理标准显示与 HiDPI 或 Retina 显示之间的差异时很有用...原创 2019-07-11 16:20:47 · 2697 阅读 · 0 评论 -
用JavaScript将Canvas内容转化成图片的方法
使用JavaScript将图片拷贝进画布要想将图片放入画布里,我们使用canvas元素的drawImage方法:// Converts image to canvas; returns new canvas elementfunction convertImageToCanvas(image) { var canvas = document.createElement("canvas"); ...原创 2018-06-06 17:15:46 · 8210 阅读 · 1 评论 -
调用摄像头(html5)显示画面
注意:调用摄像头chrom或其他浏览器需要打开摄像权限getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。getUserMedia API最初是navigator.getUserMedia,目前已被最新Web标准废除,变更为navigator.mediaDevices.getUserMedia(),但浏览器支持情况不如旧版API普及。MediaDevices.getUserMe.原创 2020-11-30 20:17:48 · 2211 阅读 · 2 评论 -
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
template.vue:<template> <div class="page"> <div class="container"> <div class="btn-group" @click="launch" v-if="wechatState"> <wx-open-launch-app id="launch-btn" :extinfo="dataStr" ...原创 2020-11-03 10:29:23 · 11223 阅读 · 11 评论 -
图像处理的滤镜算法大全及js代码实现 总有你要的那一款
灰度滤镜将颜色的RGB设置为相同的值即可使得图片为灰色,一般处理方法有: 1、取三种颜色的平均值 2、取三种颜色的最大值(最小值) 3、加权平均值:0.3R + 0.59G + 0.11*Bfor(var i = 0; i < data.length; i+=4) { var grey = (data[i] + data[i+1] + data[i+2]) / 3; ...原创 2020-03-07 21:20:20 · 1553 阅读 · 1 评论 -
小程序中实现VR效果
小程序中实现VR效果最近的工作中有一个奇葩的需求,就是更根据房间场景图,打开摄像机或者上传图片来适配不同的背景图,类似于VR的效果。一开始百度搜索,发现小程序根本没有VR的插件,而小程序要实现VR需要使用web-view,也就是使用网页的VR插件,这样的话开发成本会比较大。代码如下:<view class='container_wechatVR'> <vie...原创 2019-12-02 14:25:30 · 6138 阅读 · 3 评论 -
移动端上(传图片太大)处理方案
图片上传思路准备工作都做完了,那怎样用这些材料完成一件事情呢。这里要强调的是,考虑到移动端流量很贵,所以有必要对大图片进行下压缩再上传。图片压缩很简单,将图片用canvas画出来,再使用canvas.toDataUrl方法将图片转成base64格式。所以图片上传思路大致是:监听一个input(type=‘file’)的onchange事件,这样获取到文件file;将file转成dataUrl;然后...原创 2018-06-07 10:50:04 · 6459 阅读 · 0 评论 -
jQuery对象与JS原生dom对象之间的转换
jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象。但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对象并没有提供,所以需要转换回JS对象,才能进行操作。另外一种情况可能是,你使用某些第三方库,接口函数只能接受JS对象或者jQuery对象,那么你就需要在这两者之间进行转换。1、将jQuery转换为do...原创 2018-06-10 00:57:18 · 604 阅读 · 0 评论 -
基于HTML5之APP微信支付集成实现(转载)
一 摘要这里HTML5集成微信支付跟iOS,安卓集成微信支付过程是一样的,iOS微信集成参考之前的文章. http://blog.csdn.net/baihuaxiu123/article/details/51415717 这里引用之前文章的集成过程.如下:商户系统和微信支付系统主要交互说明:步骤1:用户在商户APP中选择商品,提交订单,选择微信支付。步骤2:商户后台收到用户支付单,调用微信支付...转载 2018-06-10 01:14:56 · 3309 阅读 · 0 评论 -
关于H5在移动端架构的优化设计总结
各大互联网公司采取的策略 一、百度移动前端首页 1. 对于首屏的静态文件css/js,在上线前全部编译直出到HTML文件中;整个首页的渲染只需要一次请求; 2.使用缓存;把不变的js/css/html全部存储到localstorage中去,然后根据cookie中添加版本号的MD5值判断是从服务器中更新还是本地获取; ...原创 2018-08-16 23:16:15 · 325 阅读 · 0 评论 -
HTML5表单及其验证
HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架,先说下表单的几个基本知识点:表单仍是以<form>元素作为容器,我们可在其中设置基本的提交特性;当用户提交页面时,表单仍然向服务器发送表单控件的值;之前老版本中的表单控件,如...转载 2018-09-11 22:49:13 · 3484 阅读 · 1 评论 -
html5 manifest 离线缓存
转于:https://blog.csdn.net/lijc_boke/article/details/69666021版权声明:随便看,欢迎技术交流,523252797(qq) https://blog.csdn.net/lijc_boke/article/details/69666021干什么用的? 离线缓存为的是第一次请求后,根据manifest文件进行本地缓存,并且在下一次请求后进...转载 2018-09-12 23:56:33 · 185 阅读 · 0 评论 -
纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)
三角形? 1 2 3 4 5 6 7 8 9 10 11 <div class="box"></div> <style> .box{ width: 0; heigh...原创 2018-09-26 21:39:31 · 1329 阅读 · 0 评论 -
js动态循环绑定事件的变量问题
在编写JS的时候我们经常会遇到要对一系列元素进行事件绑定,循环对元素的事件进行赋值,在这个过程中我们会遇到一个问题,那就每个元素事件运行的时候变量怎么都是相同的值。这里涉及到变量的作用域的问题,可以用闭包来解决这个问题。这里举个简单的列子来说明:<ul id="ulDemo"> <li>数据</li> <li>数据</li&...转载 2019-07-12 23:37:27 · 337 阅读 · 0 评论 -
image-响应式设计和HTML的<picture>标签
picture标签实现通过媒体查询的方式,根据页面宽度(当然也可以添加其他参考项)加载不同图片,具体picture详情点击查看<picture> <source srcset="3.jpg" media="(min-width: 320px)"> <source srcset="2.jpg" media="(min-width: 480px)&a原创 2018-06-07 10:25:30 · 851 阅读 · 0 评论