js
文章平均质量分 59
奥吼吼~~
这个作者很懒,什么都没留下…
展开
-
微信小程序裁剪视频部分内容导出
如果是单纯的想裁剪视频的话,微信小程序提供了一个非常便捷的API openVideoEditor如果要更换音频轨道,或者在为视频增加什么样式,就会分别获取到视频的视频轨道和音频轨道和视频的每一帧首先是获取视频的每一帧微信小程序提供了 createVideoDecoder API用来解析视频的帧数,虽然我用的时候总是感觉丢帧,但目前也没找到别的办法下面我们来获取视频的帧,并生成每一帧的图片,会用到 createOffscreenCanvas这个API用来创建一个离屏画布首先如果是选择视频的话可以直接获取到原创 2022-07-14 14:22:23 · 3492 阅读 · 32 评论 -
three.js学习(二)
组、交互、dat.gui的使用原创 2022-04-15 17:47:03 · 3396 阅读 · 0 评论 -
three.js学习(一)
这里是使用vite创建的项目,所以可以直接使用import引入1、安装three.jsnpm i three2、引入threeimport * as THREE from 'three'3、three使用时的逻辑three是通过canvas这个标签调用webgl的一些方法使用three.js时要知道场景、灯光、骨架、材质、摄像头场景中包含灯光和物体物体由骨架和材质组成灯光决定了物体在场景中表现的形式(比如投影方向之类的)摄像头就相当于观察场景的眼睛,不然光有场景没眼看的话不就啥都看原创 2022-04-13 18:09:23 · 1946 阅读 · 0 评论 -
canvas绘制海报中封装的方法
封装的方法// * 获取图片信息用来绘制//* @param { String } src - 图片的路径 本地路径或者网络都可以//* /getImageInfo(src) { return new Promise(r => { uni.getImageInfo({ src, success: (res) => { r(res) }, }) })},// * 绘制不会换行的文字//* @param { Object } ctx - ca原创 2021-11-26 14:07:18 · 532 阅读 · 2 评论 -
微信浏览器打开APP
微信浏览器会阻止在其中直接打开APP 所有一般需要引导用户去其他浏览器但是如果还是想在微信浏览器直接打开APP的话可以通过 wx-open-launch-app这个组件这里是官方文档需要的一些信息在使用这个组件之前我们需要两个appid和一个AppSecretappid(服务号的appid和需要被打开的appid)AppSecret(服务号的AppSecret)申请服务号(APP和服务号绑定在一个微信开发平台上面)服务号申请好之后设置IP白名单和JS接口安全域名之后按照下图进行操作,关联需原创 2021-10-27 14:42:47 · 3750 阅读 · 2 评论 -
从0开始的canvas学习(三)将视频或图片处理成黑白的
从0开始的canvas学习(一)从0开始的canvas学习(二)延续之前将图片或者视频绘制到画布上的方法之后现在假如我们要将视频或者图片处理处理成一些自己想要的效果比较黑白或者让颜色对比更加明显,我们可以通过getImageData()和putImageData()这两个API去实现显示效果简单描述一下要使用的APIgetImageData()把画布中的像素数据拿出来putImageData()向画布中填充色值大概流程获取到画布元素之后把图片绘制到画布上绘制结束后通过getIma原创 2021-07-27 09:10:07 · 527 阅读 · 0 评论 -
从0开始的canvas学习(二)
本文将讲到微信小程序画布和html设置向画布中导入图片和获取视频某帧以及导出图片向画布上面加载图片drawImage会用到这个api首先先看看官方怎么说一、html首先要等把图片加载完成后再调用这个api总体还是蛮简单的<canvas id="myCanvas"></canvas><script> var ctx = myCanvas.getContext('2d') var myImage = new Image() myImag原创 2021-07-23 09:33:57 · 471 阅读 · 0 评论 -
canvas基础(一)
canvas感觉很炫酷获取画布对象getContext的参数有两种2d和webgl这篇文章主要说的是2dwebgl会在我之后的其他文章里涉及,像一些3d效果就可以用它实现效果还是蛮炫酷的<canvas id="myCanvas"></canvas><script> var ctx = myCanvas.getContext('2d')</script>canvas 常用的一些属性和方法1、fillStyle(属性)主要是用填充原创 2021-07-21 16:43:37 · 209 阅读 · 1 评论 -
迭代器和promise替换async/await
function awaitDome(){ return new Promise((r) => { setTimeout(function(){ r(1) console.log(1) },2000) }) }async function asyncDome(){ console.log('await',await awaitDome()) console.log(2)}如果只有一个异步操作的话很简单function awaitDome(){ return ne原创 2021-06-29 11:23:58 · 356 阅读 · 3 评论 -
webgl学习笔记
opengl 纯可编程式管线技术原创 2021-06-17 17:22:20 · 324 阅读 · 3 评论 -
prefixfree.min.js 的用途
简单而言,这东西就是自动加前缀的,在link中,或是style中,或是dom元素的style中书写CSS3 code,或是jQuery .css()方法此脚本会自动补上需要的前缀,让响应的浏览器支持该CSS3属性避免了一些老长的浏览器前缀兼容性,比如:使用方法:在文档开始头部调用;...转载 2021-06-09 14:06:20 · 204 阅读 · 2 评论 -
apicloud记录代码
let apiUrl = { // 请求路由}var url = ''; //服务器地址var apiName = '/api/'; //请求路由前缀var baseUrl = ''; //七牛云的服务器地址let count = 60;function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&");原创 2021-04-12 18:16:27 · 324 阅读 · 0 评论 -
apicloud选择表情
vant记录代码<!DOCTYPE html><!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,width=device-width,initial-scale=1.0,user-scalable=no" />原创 2021-04-07 20:15:45 · 225 阅读 · 0 评论 -
混合app获取Android和ios软键盘的高度
用的apicloud 其他的混合应该也能用找了很多乱七八糟的资料 可以确定是没有公开的api让我获取软键盘高度东拼西凑出来了下面的东西 可以用的 效果不错这个就是 输入框 <textarea ref="textarea" id="textarea" @focus="focus" @click="emojiShow = false" placeholder="说点什么吧..." v-model="content" id="textarea"原创 2021-04-06 18:46:45 · 581 阅读 · 0 评论 -
js冒泡、选择、插入排序
var arr = [1, 2, 458, 6, 7, 5, 1, 111113, 5] var temp = null; // 冒泡 通过 前一个和后一个不断比较 每一次比较完之后放到最后的都是最大的 然后从头开始下一轮比较 // for(let i = 0;i < arr.length;i++){ // for(let j = 0;j < arr.length - i;j++){ // ..原创 2021-01-08 17:41:24 · 75 阅读 · 0 评论 -
js中封装常用的方法
/** * 表格时间格式化 */export function formatDate(cellValue) { if (cellValue == null || cellValue == "") return ""; var date = new Date(cellValue) var year = date.getFullYear() var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : da转载 2020-12-23 10:02:53 · 376 阅读 · 0 评论 -
前端转化视频链接
function urlToBlob(the_url, callback) { let xhr = new XMLHttpRequest(); xhr.open("get", the_url, true); xhr.responseType = "blob"; xhr.onload = function() { if (this.status == 200) { if (callback.原创 2020-12-08 15:57:12 · 846 阅读 · 0 评论 -
ios和safari对时间戳的处理
ios系统和safasi都是苹果那边的苹果 内核中的new Date()中无法解析-这个字符当放入时会显示不存在的时间对象new Date() 可以解析 /ios中 new Date(‘2020-10-1’) 在ios中显示不存在的timeios中 new Date(‘2020/10/1’)正常ios中 new Date(‘2020/10’) 显示不存在的time安卓中的时间对象可以解析任何字符...原创 2020-09-28 21:11:24 · 358 阅读 · 0 评论 -
前端读取pdf并且把图片打包下载
链接:https://pan.baidu.com/s/169X-el6fj05TIMWZWsLEBw提取码:5hiq原创 2020-08-25 09:19:21 · 325 阅读 · 0 评论 -
资料
消息推送原创 2020-07-23 17:01:33 · 84 阅读 · 0 评论 -
canvas生成图片转化成base64转化成blob转化成本地地址
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #qianduanwz {原创 2020-07-10 15:51:56 · 1428 阅读 · 2 评论 -
记录代码生成2020-7-8这种日期格式的代码
let now = new Date(); let morr = new Date(now.getTime() + (60 * 60 * 24 * 1000) * 1 ); let dateList = ['周日','周一','周二','周三','周四','周五','周六'] this.data.dataTime.push({day:"明天",time:morr.getFullYear() + '-' + (morr.getMonth() + 1) + '-' + morr.getD原创 2020-07-08 14:52:30 · 340 阅读 · 0 评论 -
tts语音地址
https://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=1&pdt=301&vol=9&rate=32&per=6&tex=试试这可以通过改变per的参数来改变音色原创 2020-06-07 18:46:52 · 7996 阅读 · 7 评论 -
js关于原型的一些方法
function Person(){this.age = 100} var person1 = new Person;①isPrototypeOf() Person.prototype.isPrototypeOf(person1); //true②Object.getPrototypeOf() alert(Object.getPrototypeOf(person1) == Person.prototype) //true③hasOwnProperty() //判断属性是否是存在于原创 2020-05-29 12:43:04 · 757 阅读 · 1 评论 -
js中使用json拷贝数组或者数组的方法
var arr = [ { a:1 }, { a:2 }, { a:3 },]var copyArr = JSON.parse(JSON.stringify(arr)));原创 2020-03-29 22:20:59 · 551 阅读 · 0 评论 -
javaScript高级总结
本人小白,如有不对,请求指出,谢谢大佬原创 2019-07-18 23:53:15 · 158 阅读 · 0 评论 -
2048
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> table{ margin:100px auto; border: 1px solid black; width:...原创 2019-08-05 21:51:09 · 425 阅读 · 0 评论 -
js飞机大战
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /**{ margin:0px; padding:0px; }*/ .game...原创 2019-07-22 23:53:18 · 698 阅读 · 4 评论 -
了解__proto__和prototype还有原型还有原型链之间的关系
对象只有__proto__属性函数有prototype属性函数是个特殊的对象所以它也有这个__proto__这个属性function Animal(name,weight){ this.name = name; this.weight = weight; } Animal.prototype.eat = function(){console.log("动物吃东西"...原创 2019-07-17 21:29:32 · 192 阅读 · 0 评论 -
js的预编译
js是解释型语言,读取一段执行一段js执行的时候一般分为两个时期:预编译期、执行期执行期:基本就是按照逻辑从上往下执行;预编译:一般都发生代码执行前,大体来算一共有4个阶段:1> 先创建一个全局GO(Global Object)(window对象)2> 变量的声明被提升,并对变量赋值undefined3> 统一实参和形参,把实参的值付给形参4> 函数的声明被提...原创 2019-05-24 10:14:49 · 216 阅读 · 0 评论 -
dom节点操作
获取节点元素的几种方法document.getElementById(""); // 通过元素选出Id选出document.getElementsByClassName(""); // 通过元素选出class选出document.getElementsByTagName(""); // 通过元素的标签名选出document.getElementsByName(""); // 通过元素的na...原创 2019-05-26 17:25:50 · 148 阅读 · 0 评论 -
js数据中栈和堆的初步理解
js的数据有两种类型: 原始值 和 引用值;原始值:是直接存储数据本身;引用值:就是字面意思就是引用过来的值var变量声明会在栈中开辟内存空间来放这个变量及其值var 声明一个原始值 会 直接将数据本身放在栈中 而引用值会在栈放下自己的数据的引用地址引用值就是通过引用地址来对自身的属性或者方法进行调用引用值的引用地址指向就是堆,当对引用值类型进行赋值时,它会把要被引用的数据放到堆中...原创 2019-07-11 00:02:47 · 307 阅读 · 0 评论 -
js中for……in循环
for……in循环主要用来遍历对象的每个属性<script>function Eg(){ this.name ="张三"; this.age = "30"; this.port = "显老的程序员";}var eg = new Eg(); //实例化for(var k in eg){ //定义一个k变量 在eg对象中遍历 console...原创 2019-06-14 20:31:10 · 6341 阅读 · 0 评论 -
js事件对象获取中target和currentTarget的区别
target和currentTarget获取的都是对象target获取是触发事件的源对象currentTarget获取的事件绑定的对象<body><input type = "button" value="点我" /><script>var inp_01 = document.getElementsByTagName("input")[0];doc...原创 2019-06-14 20:22:27 · 2144 阅读 · 0 评论 -
es6 import的使用和express中nodemon使用时出现的问题
这是在express中使用了import 和 export 这两个高级语法 无法识别使用前要安装安装 nodemon 监视文件修改: npm i --save-dev nodemon 还有 修改环境变量的 npm i --save-dev cross-env这是package.json中的配置 "scripts": { "dev": "cross-env NO...原创 2019-12-10 14:53:11 · 766 阅读 · 0 评论 -
js中的事件
版权声明:本文为CSDN博主「qindayong!」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/weixin_44036436/article/details/96622647javascript中的事件1、鼠标事件事件描述onclick点击某个对象时触发ondblc...转载 2019-11-08 11:36:58 · 335 阅读 · 0 评论 -
推荐一个比较好用的js库
lodashjshttps://www.lodashjs.com/原创 2019-11-06 21:27:59 · 588 阅读 · 0 评论 -
es6中的Map对象
基本概念var maps = new Map(); // 声明一个Map实列从上图可以看出Map原型中的方法var maps = new Map([123,123]); // 这样写的话会报错大意为:迭代器值123不是入口对象Map实例是一种类似Object那种方式一样存储内容,括号里面的参数是一个二维数组var maps = new Map([['A',1],['B',2],...原创 2019-11-06 10:08:32 · 1153 阅读 · 0 评论 -
es6中padStart和padEnd
padStart和padEnd是es6中新增的语法这两个方法都是字符串原型上的方法,所以只能对字符串使用是新增的方法不会修改原字符串,只有es5才会改变原数据str.padStart(MaxLength,'填充的内容') // 当str的长度没有达到MaxLength,会将第二个参数填充到这个str前直到相当str.padEnd(MaxLength,'填充的内容') // 和上面一样不过是...原创 2019-11-03 18:26:23 · 381 阅读 · 0 评论 -
Promise的概念
什么是Promisejs是一个单线程语言,Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改...原创 2019-10-24 12:50:08 · 123 阅读 · 0 评论