目前有两种思路:
- 借鉴exif.js的做法,以二进制的形式请求图片数据,然后从二进制里面读取图片的宽高信息。javascript能否只请求图片的部分数据(含有宽高的数据),而不用把整个图片的二进制都请求下来?
- 牛人写的n年前的老代码。大概思路是请求这张图,起一个定时器不停问浏览器拿到原始宽高了没有,拿到数据时这张图不一定被浏览器完全加载。
第二种方式虽能实现效果,但是感觉思路上不如第一种,有没有大牛实践过第一种的。
没有足够的数据
(゚∀゚ )
暂时没有任何数据
hping 关注了问题 · 2019-07-19
目前有两种思路:
第二种方式虽能实现效果,但是感觉思路上不如第一种,有没有大牛实践过第一种的。
关注 5 回答 3
hping 关注了问题 · 2019-07-19
我通过监测页面横竖屏状态动态设置图片宽度,横竖屏变了之后,宽度的属性也设置成功了,但是不是实际应该展示的看度,还是需要刷新一下才能显示真正设置的宽度,这是什么原因呢?
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", checkScreenOrientation, false);
function checkScreenOrientation() {
if (window.orientation === 0) {
this.screenOrientation = 'portrait';
}
if (window.orientation === 90 || window.orientation === -90) {
this.screenOrientation = 'landscape';
}
this.init()//执行设置图片宽度的方法 :slider.style.width = '100%';
}
根据我多方面分析,应该是竖屏给某些元素设置了宽高,在横屏下没有清除掉导致的。
关注 5 回答 1
hping 回答了问题 · 2019-07-19
请把括号里面的所有+去掉, 不然你后面的{6,18}
匹配的括号里面组合重复6-18, 如'f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6'就不会通过:
/^(?:\d|[a-zA-Z]|[!@#$%^&*]){6,18}$/
请把括号里面的所有+去掉, 不然你后面的{6,18}匹配的括号里面组合重复6-18, 如'f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6f6'就不会通过:
关注 7 回答 7
hping 回答了问题 · 2019-07-18
Swtext组件内部是不是又使用了Swtext,但是Swtext没有name属性
Swtext组件内部是不是又使用了Swtext,但是Swtext没有name属性
关注 5 回答 5
hping 回答了问题 · 2019-05-15
图标自己制作的吗,高宽不一样,应该是图标的问题
图标自己制作的吗,高宽不一样,应该是图标的问题
关注 4 回答 3
hping 评论了文章 · 2019-05-13
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。
初级阶段已经完结,之后会针对之前提到过的内容,对实际场景进行分享。正好前段时间我不是一直在加班做聊天的功能嘛。今天我们就来说一说其中遇到的东西。
聊天功能中的发送框的实现及一些常规操作的实现。
关键词 | 文字 | 换行 | 图片 |
---|---|---|---|
input | √ | × | × |
textarea | √ | √ | × |
contentEditable | √ | √ | √ |
你会说这东西我知道,给元素加上就可以编辑内容。老铁,这么简单当然不行了。
css 也可以支持同样的功能-webkit-user-modify
,值有
当然我们用的还是富文本的样式。因为我们里面需要表情
Node 是一个接口,许多 DOM API 对象的类型会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象;比如, 继承同一组方法,或者用同样的方式测试。
以下接口都从 Node 继承其方法和属性:
Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
-----------------https://developer.mozilla.org...
HTMLElement
的名字跟它所关联的标签对应,比如 HTMLAudioElement
对应的是 'audio'
Text
节点对应 '#text'
。Document
节点对应 '#document'
。Node.nodeType
Name | Value | status |
---|---|---|
ELEMENT_NODE | 1 | |
ATTRIBUTE_NODE | 2 | warn |
TEXT_NODE | 3 | |
CDATA_SECTION_NODE | 4 | |
ENTITY_REFERENCE_NODE | 5 | warn |
ENTITY_NODE | 6 | warn |
PROCESSING_INSTRUCTION_NODE | 7 | |
COMMENT_NODE | 8 | |
DOCUMENT_NODE | 9 | |
DOCUMENT_TYPE_NODE | 10 | |
DOCUMENT_FRAGMENT_NODE | 11 | |
NOTATION_NODE | 12 | warn |
上面两个属于比较重要的
Element是非常通用的基类,所有 Document对象下的对象都继承它. 这个接口描述了所有相同种类的元素所普遍具有的方法和属性。 这些继承自Element并且增加了一些额外功能的接口描述了具体的行为. 例如, HTMLElement 接口是所有HTML元素的基础接口, 而 SVGElement 接口是所有SVG元素的基本接口.大多数功能在类的层次中进一步制定.
在web以外的语言,像 XUL 可以通过 XULElement 接口, 同样也实现了Element接口.
Node 中是会包含文本节点的。比如Text。
而 Element 包含的都是标签节点。
如果换成 DOM 操作,好像功能还蛮简单的 appendChild
、insertBefore
、replaceChild
好像就基本可以搞定了。但是换到富文本中呢?我们需要解决几个问题
window.getSelection();
这个可以用来获取焦点位置。anchorNode
指向用户开始选择(按下鼠标键)的地方,而 focusNode
指向用户结束选择(松开鼠标键)的地方。
注意不能与选区的起始位置和终止位置混淆,因为开始选择的位置可能在结束选择位置的前面,也可能在结束选择位置的后面,这取于选择文本时鼠标移动的方向(也就是按下鼠标键和松开鼠标键的位置)。isCollapsed
布尔值,用于判断选区的起始点和终点是否在同一个位置。
//可以用这段代码来观察
setInterval(()=>{
var selection=window.getSelection();
console.log(selection)
},1000)
从上面的内容中,我们可以看到,在文本中是一个 Node
节点,那我应该如何插入节点呢?这其实就是调用 insertData
这个api就好了。但是,怎么能如此简单呢?我们插入的是 DOM 而不是简单的文本,所以这个操作不能用。
这里我们要用的其实是splitText
,用于在焦点处分割开内容。然后再after
增加内容。
这个就比较简单了。节点的话,直接加入进去就好了。因为节点不存在说中间插入。但是呢,当你在节点之后的时候,你需要获取其中所有的 nodes
然后根据 offset
找到点。childNodes
和children
该使用那个呢?这个就涉及到上面说到的 Node
和 Element
的区别,留个小作业,自己试一下吧。友情提示,报错的时候记得看是不是 anchorNode
为 Text
节点。
既然点击会失去焦点,那么我们在blur的时候记录。然后给显示回去就OK了。
测试地址,其实还有一个效果没处理,那就是选区处理。可以当做一个课后作业。
这个功能很坑,因为还是富文本。所以粘贴进来的是有样式的。但是我们不需要样式,所以我们要过滤掉所有的标签。但是又因为我们可以复制粘贴图片。所以我们需要过滤出来我们的图片。
方案有两种
粘贴进来的内容,我们需要处理 paste
事件。 e.clipboardData
是获取剪贴板对象。提供了 getData
来获取剪贴板内容。比如 getData('text');
获取文字内容。getData('text/html');
获取html格式内容。
tips:
files
里面。e.preventDefault();
,用来阻止默认的事件。这个功能没实现,感觉上很难,达不到原生的那种感觉,也有可能是我api没找到,希望会的人告我一下。
说一下我能给出的方案,因为不能 setData
所以方案还是考虑阻止默认的
主讲人文章-浏览器科普
感谢评论区的回复, document.execCommand --MDN 的支持用起来的确会少控制一些逻辑。
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。
hping 回答了问题 · 2019-05-13
你自己都看到了文档说的很清楚
调用 rl.close() 不会立即停止 readline.Interface 实例触发的其他事件(包括 'line')。
不会立即停止line事件,表示调用rl.close后line事件还会继续出发的,和你加不加上 console.log()没有关系的,不行你在rl.close之前打个日志就知道了
不会立即停止line事件,表示调用rl.close后line事件还会继续出发的,和你加不加上 console.log()没有关系的,不行你在rl.close之前打个日志就知道了
关注 3 回答 1
hping 回答了问题 · 2019-05-10
我猜你写的是一个dialog,有个ok按钮,是你的哪个div这样写了
<div onOk={onOk}>xxx</div>
改为:
<div onClick={onOk}>xxx</div>
我猜你写的是一个dialog,有个ok按钮,是你的哪个div这样写了 {代码...} 改为: {代码...}
关注 2 回答 1
hping 回答了问题 · 2019-05-08
不是xhr
对象,这个问题就类似document.getElementById怎么实现的?div.addEventListener怎么实现的一样,都是浏览器提供的api,怎么实现我想你只有去看浏览器的源码
不是xhr对象,这个问题就类似document.getElementById怎么实现的?div.addEventListener怎么实现的一样,都是浏览器提供的api,怎么实现我想你只有去看浏览器的源码
关注 3 回答 2
查看全部 个人动态 →
(゚∀゚ )
暂时没有
注册于 2016-09-25
个人主页被 903 人浏览
推荐关注