bt365体育投注.主頁欢迎您!!

    <acronym id="zvmrr"></acronym>
    <td id="zvmrr"></td>
  • <tr id="zvmrr"><label id="zvmrr"></label></tr>
  • <acronym id="zvmrr"></acronym>
  • linong

    linong 查看完整档案

    北京编辑  |  填写毕业院校优贝在线  |  前端开发工程师 编辑 www.lilnong.top/ 编辑
    编辑

    做技术的时候,往往不是我想怎么样就怎么样。而是在现有场景下我可以怎么样。

    Read-Search-Ask
    赢了大吉大利,输了再接再厉
    OTIwMTEwNjMzQHFxLmNvbQ==

    微信公众号:前端linong

    个人动态

    linong 回答了问题 · 47 分钟前

    请问为什么防抖函数返回的匿名函数的this指向input?为什么捕获不到event?

    image.png

    方法没写对,一般都是 arguments 然后 apply 进去

    function debounce(fn, interval) {
                let timer = null;
                return function(event) {
                    console.log(this); // <input id="content" type="text">
                    if (timer) {
                        clearTimeout(timer);
                    } 
                    timer = setTimeout(function(){
                        fn(event);
                    }, interval)
                }
            }

    关注 2 回答 1

    linong 回答了问题 · 12月3日

    解决怎么打开eslint自动格式化功能?

    他不会自动格式化的。需要你调用的时候加 --fix

    然后一部分自动格式化其实是编辑器的插件

    关注 2 回答 1

    linong 发布了文章 · 12月3日

    面试题:使用 css 隐藏页面元素

    image

    我们先来说一下限制条件

    1. 可以使用 css、html、js
    2. 元素为一个 100*100 的红色矩形,里面包含一个 50*50 黑色矩形
    3. 只要在页面上看不到就算隐藏

    测试地址:https://www.lilnong.top/static/html/hidden-dom.html

    实现隐藏页面元素

    1. 移动到屏幕外面,眼不见心不烦

      1. margin
      2. left + position
      3. transform:translate
    2. 使用特性

      1. display
      2. visibility
      3. opacity
      4. overflow:hidden + 0宽高
      5. transform:scale
      6. hidden 属性
    3. 移出 DOM 树,年轻人不讲武德

      1. removeChild

    实现代码

    .demo1{
        margin: -9999px 9999px 9999px -9999px;
    }
    .demo2{
        display: none;
    }
    .demo3{
        visibility: hidden;
    }
    .demo4{
        opacity: 0;
    }
    .demo5{
        width: 0;height: 0;border: none;outline: none;overflow: hidden;
    }
    .demo6{
        left: -9999px;top: -9999px;position: absolute;
    }
    .demo7{
        left: -9999px;top: -9999px;position: relative;
    }
    .demo8{
        left: -9999px;top: -9999px;position: fixed;
    }
    .demo9{
        transform: translate(-9999px, -9999px);
    }
    .demo10{
        transform: scale(0,0)
    }

    留作业

    作业就留给你们啦,反正我这次不写(下次是什么时候我也不知道)。

    如何隐藏页面元素?(扩展题)

    1. 可以使用 css、html、js

      1. (扩展)vue、react、angular 的方法也可以
    2. 元素为一个 100*100 的红色矩形,里面包含一个 50*50 黑色矩形
    3. 只要在页面上看不到就算隐藏
    4. (扩展)是否占据位置?如果占据位置的话,是否可以监听到事件?比如说 click 。

      1. 如果可以监听到事件,那么如何让他无法监听事件。
      2. 如果不可以监听到事件,那么如何让他监听到事件?如果无法实现请说明理由
    5. (扩展)是否存在于 DOM 树中?

      1. 比如说是否可以通过 children 获得?
      2. 比如说是否可以通过 querySelector 获得?
      3. 是否可以在开发者工具中看到?
    6. (扩展)是否触发回流(Layout)和重绘(Painting)?
    查看原文

    赞 3 收藏 2 评论 0

    linong 赞了文章 · 12月2日

    用 AI 生成山水画!开发者竟然是个没毕业的大学生

    AI 盯上中国山水画!成功骗过超半数人类观察者

    外国人画中国山水画不稀奇,AI 作画也不新鲜。

    但是外国学生用 AI 生成中国山水画可是新鲜事。

    中国人一直对“手工”有着特殊的感情,如果一幅画是机器创作的,那它似乎就少了那么点味道。但是,一个来自普林斯顿大学的姑娘却成功的用她开发的 AI 模型骗过了一半以上看过这些画的人。

    AI 与中国传统艺术结合,居然让中国人难辨真假

    用 AI 创作画作已经不是什么新鲜事了,英伟达的 GauGAN、MIT 和 IBM 联合发布的 AI Portraits Ars 都是现在被广泛使用的 AI 图像生成工具。利用 GauGAN,你随便画几条线都可以得到一幅美丽的风景图。使用 AI Portraits Ars 你还能把自己表情怪异的照片变成优雅的中世纪风格。

    image.png

    与那些更多应用于与西方艺术结合的 AI 工具不同,这位即将从普林斯顿大学毕业的姑娘 Alice Xue 将目光投向了中国传统艺术。

    她收集了来自普林斯顿大学美术馆、哈佛大学美术馆、大都会艺术博物馆和史密森尼弗里尔美术馆的 2192 幅高质量的中国山水画训练自己开发的 AI 模型 SAPGAN(Sketch-And-Paint GAN)。

    不过,AI 的作品总会与人类的创作有所不同,尤其是绘画这种需要独特技艺的创作。中国山水画的创作过程就很讲究,光步骤就有有勾、皴、点、染等等,更不用说下笔的技巧和力度之类的。

    image.png

    令人意外的是,一项 242 人的图灵视觉测试,测试结果显示,有 55% 的人将 SAPGAN 的作品当作了人类创作的。更夸张的是,参与测试的人中,中国参与者似乎更容易被骗,超过一半的中国人误判了这些山水画的作者,而外国参与者的准确率却达到了 73.5%。

    原来,Alice Xue 为了让 AI 模型的创作更加真实,真的把模型创作过程做到了和中国山水画创作过程完全一致。这么来看,也许越多山水画有了解,想从绘画技巧方面判断画作越可能被 AI 欺骗。

    image.png

    凡而不自知,Alice 居然没学过机器学习

    Alice Xue 可以成为“凡尔赛文学”的代表了,但她是真的优秀。

    如果你以为开发出如此厉害的 AI 工具的人是个资深程序员,那就大错特错了。Alice Xue 只是普林斯顿大学一个还没毕业的本科生,而 SAPGAN 只是她的毕业作品。这个作品成功的让她获得了普林斯顿 2020 优秀毕业论文奖。

    image.png

    别急,还有更容易让我等凡人自卑的。

    Alice Xue 说在开发这个 AI 模型之前,她从未上过机器学习过程。但她还是谦虚的表示,在开发过程中她作为一个新手常常会不知所措。不过优秀的人总能找到看问题的不同角度,她在这个过程中思考的是“像我这样的新手能为已经存在的创新研究做些什么。”

    对于毕业后职业,Alice Xue 也有了自己的规划,她准备去 Facebook 工作,成为一名软件工程师。

    image.png


    在以往的艺术与 AI ?的结合中,出现更多的是 AI 现代艺术和西方文化上的应用。那些创作诗歌、散文的 AI ?工具在总是另有深意的中国传统文化的应用中总有水土不服之感。

    但 Alice Xue 却发现了其中规律,成功的将中国山水画与 AI 结合。虽然现在它还不能称为完美,但也为未来的 AI 发展开辟了另一个方向。

    就像 Alice Xue 说的,“无论是19世纪的文学作品还是爵士乐,总有一种方法可以从中收集数据,用来分析或制作与之相关的技术工具。”

    论文链接:https://arxiv.org/pdf/2011.05552.pdf

    GitHub 地址:https://github.com/alicex2020/Chinese-Landscape-Painting-Dataset
    segmentfault 公众号

    查看原文

    赞 5 收藏 1 评论 0

    linong 发布了文章 · 12月2日

    面试题:JS 获取图片宽高

    一般用于审核后台,比如说要求图片在一定区间内才能加精
    也用于在 canvas 中裁图时计算缩放比例

    JS 获取图片宽高

    获取 naturalWidth(callback 版本)

    方案为获取 naturalWidth。那么 naturalWidthwidth 有什么不同?

    • naturalWidth 标识图片的原始宽高。
    • width 因为历史问题,标识的其实是 DOM 元素宽高。
    • 因为 img 标签会被图片撑开,所以

      • 在不设置 width 属性时,width == naturalWidth
      • 在设置了 width 属性时,width != naturalWidth
    getImgRawSize = (img, cb) => {
        var _image = img;
        if (_image instanceof HTMLImageElement) {
            // 传入的是 DOM 对象
            if (_image.naturalWidth) {
                // 推荐使用 naturalWidth ,因为该值返回的是原始值,不会被属性影响
                return cb({width: _image.naturalWidth, height: _image.naturalHeight})
            }
            if (_image.complete) {
                // 如果没有 naturalWidth 且图片已加载完成,那么很大几率是不支持
                // 为了防止被属性影响,我们要用空白的标签重新加载
                img = img.src
            }else{
                // 没有加载完成的话直接用
                _image = img;
            }
        }
        if(typeof img == 'string'){
            // 传入的是 url
            _image = new Image();
            _image.src = img
        }
        _image.onload = _ => {
            // 如果想要安全的,可以考虑拿不到naturalWidth就是用新的 Image 来获取
            cb({width: _image.naturalWidth || _image.width, height: _image.naturalHeight||_image.height})
        }
        _image.onerror = _ => {
            cb({width: 0, height: 0})
        }
    }

    测试截图

    image.png

    测试用例

    getImgRawSize('https://www.lilnong.top/static/img/ml-active-btn1.png', v=>console.log(1, v))
    getImgRawSize('https://www.lilnong.top/static/img/ml-active-btn6.png', v=>console.log(2, v))
    
    // 测试未加载
    img = new Image()
    img.src = 'https://www.lilnong.top/static/img/defaultmatch.png'
    getImgRawSize(img, v=>console.log(3,v))
    
    
    // 测试未加载且设置宽高
    img = new Image()
    img.width = 10
    img.height = 20
    img.src = 'https://www.lilnong.top/static/img/QQ_20190301172837.jpg'
    getImgRawSize(img, v=>console.log(4,v))
    
    
    // 测试已加载
    img = new Image()
    img.src = 'https://www.lilnong.top/static/img/Rectangle%2010.png'
    img.onload = ()=>getImgRawSize(img, v=>console.log(5,v))
    
    // 测试已加载且设置宽高
    img = new Image()
    img.width = 10
    img.height = 20
    img.src = 'https://www.lilnong.top/static/img/ml-btn6.png'
    img.onload = ()=>getImgRawSize(img, v=>console.log(6,v))

    获取 naturalWidth(Promise 版本)

    实现和上面是一致的,只不过改为了 Promise 版本。

    getImgRawSize = (img) => {
        return Promise.resolve(new Promise(function(reslove, reject){
            var _image = img;
            if (_image instanceof HTMLImageElement) {
                if (_image.naturalWidth) return reslove({width: _image.naturalWidth, height: _image.naturalHeight})
                img = img.src
            }
            if(typeof img == 'string'){
                _image = new Image();
                _image.src = img
            }
            _image.onload = _ =>  reslove({width: _image.naturalWidth || _image.width, height: _image.naturalHeight||_image.height})
            _image.onerror = _ =>  reject({width: 0, height: 0})
        }))
    }

    测试截图

    image.png

    测试用例

    getImgRawSize('https://www.lilnong.top/static/img/ml-active-btn1.png').then(v=>console.log(1, v))
    getImgRawSize('https://www.lilnong.top/static/img/ml-active-btn6.png').then(v=>console.log(2, v))
    
    // // 测试未加载
    img = new Image()
    img.src = 'https://www.lilnong.top/static/img/defaultmatch.png'
    getImgRawSize(img).then(v=>console.log(3, v))
    
    
    // 测试未加载且设置宽高
    img = new Image()
    img.width = 10
    img.height = 20
    img.src = 'https://www.lilnong.top/static/img/QQ_20190301172837.jpg'
    getImgRawSize(img).then(v=>console.log(4, v))
    
    
    // 测试已加载
    img = new Image()
    img.src = 'https://www.lilnong.top/static/img/Rectangle%2010.png'
    img.onload = ()=>getImgRawSize(img).then(v=>console.log(5, v))
    
    // 测试已加载且设置宽高
    img = new Image()
    img.width = 10
    img.height = 20
    img.src = 'https://www.lilnong.top/static/img/ml-btn6.png'
    img.onload = ()=>getImgRawSize(img).then(v=>console.log(6, v))
    查看原文

    赞 3 收藏 1 评论 0

    linong 关注了问题 · 12月1日

    tab激活右侧的左滑动动 激活左侧的右滑动 具体实现思路和方案是什么呢?

    image.png

    有大神能提供一个明细方案 或者具体的思路嘛? 多谢啦

    关注 4 回答 2

    linong 回答了问题 · 12月1日

    解决单页面应用为了保护其他页面的js和接口,是否有必要把登录页单独做为一个页面?

    难道不应该是路由懒加载?

    其实我考虑的是,你通过什么样的方式来防止没有权限的用户不能访问 js。

    暴露接口也好还吧,本质上来讲他还是需要鉴权的

    关注 5 回答 3

    linong 关注了问题 · 12月1日

    请问怎么在浏览器内实现对电脑播放内容进行录音?

    我找到了如下的项目,可以录制我的麦克风声音,但是我想录的其实是电脑里播放的声音。
    https://codepen.io/lquicksell...

    举个例子,电脑里播放了一个音乐,我想写个程序去录这个音乐,并且不要录到麦克风的声音。

    大家知道怎么做吗?

    关注 5 回答 4

    linong 回答了问题 · 12月1日

    layui 的两个问题,一直搞不定,求解!

    问题一,就是使用img标签渲染即可,和你上面拼接的方法差不多

    问题二,你说的事件看上去应该是每次都成功了。因为你每次的节点是对的。那么考虑两种方法

    1. 事件内部使用this,而不是TR
    2. 使用事件委托而不是直接绑定事件

    关注 2 回答 2

    linong 关注了问题 · 12月1日

    如何设置代理为https协议?

    为了设置这个cookie
    set-cookie: JSESSIONID=2D7853DB3161FEEABBDCA48D2C2CC448; Path=/; Secure; HttpOnly

    我需要把请求改为https协议的

    我试了代理:
    `devServer: {

    proxy: {
      '/': {
        target: 'https://www.ylcx.online:442',
        secure: true
      }
    }

    }`

    或者是直接访问https://localhost

    结果不行

    怎么解决?

    关注 2 回答 0

    认证与成就

    • 获得 2052 次点赞
    • 获得 42 枚徽章 获得 1 枚金徽章, 获得 8 枚银徽章, 获得 33 枚铜徽章

    擅长技能
    编辑

    开源项目 & 著作
    编辑

    (??? )
    暂时没有

    注册于 2016-07-12
    个人主页被 30.5k 人浏览

    bt365体育投注