草庐IT

javascript - PhantomJS:获取页面的渲染尺寸

当使用PhantomJS进行屏幕捕获时,页面的大部分内容是在通过JavaScript加载时或加载期间添加的,我遇到了一个问题。调用render()会生成正确的图像,显​​示页面的全部内容,但评估document.body.clientHeight会返回一个很小的值,该值可能是添加任何内容之前页面的高度。当PhantomJS渲染图像时,如何获取图像的高度/宽度?我不认为这是一个时间问题,我尝试过调换事物的顺序或设置较长的延迟以确保一切都已完全加载。varwp=require('webpage');varpage=wp.create();page.viewportSize={width:1

上传图像文件的javascript/jquery大小和尺寸

我需要使用javascript/jquery显示以千字节为单位的图像大小和尺寸(高度、宽度)。我遇到了几个类似的帖子,但没有一个能帮助我。我有两组代码,它们是分开工作的。我不知道如何将它们放在一起。这是html代码:这段代码检查文件大小并预览图像:functiononFileLoad(e){$('#preview').append('');}functiondisplayPreview(files){varreader=newFileReader();reader.onload=onFileLoad;reader.readAsDataURL(files[0]);fileSize=Mat

javascript - 显示当前屏幕尺寸 - 响应式设计工具

与所有前端开发人员一样,我目前正在进行大量响应式设计开发。我很想知道的一件事是当前屏幕的确切尺寸。Chrome有它:https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh如何使用Firefox显示当前屏幕大小? 最佳答案 这是一个非常古老但值得一提的问题。Firefox现在有“ResponsiveDesignMode”,这是我在任何浏览器上看到的最好的响应测试。快捷方式是Cntrl+Shift+M,您可以在美妙

javascript - 如何获得包含尺寸的宽度和高度?

假设我有以下html:html,body{height:100%;overflow-y:hidden;}div{background:url(path)no-repeatcenter;width:100%;height:100%;background-size:contain;}demo这里,background-size是contain,全宽和全高都是100%,但是背景图片的区域没有被div完全覆盖。那么,有没有什么办法可以得到被覆盖图片的宽高呢? 最佳答案 documentation提到以下关于contain的内容:Thiske

javascript - 加载后淡入背景图像(无 jquery),同时仍使用媒体查询替换不同屏幕尺寸的图像

我整晚都在看书,似乎无法就最好的方法是什么给出任何具体的答案。我知道起作用的两件事是:加载图片时淡入淡出:使用图像包装器和像这样的标签:CSS看起来像.imageWrapper{opacity:0}.loaded{opacity:1}然后在你的js文件中有类似的东西varimageLoaded=(img)=>{varimgWrapper=img.parentNode;imgWrapper.className+='loaded';}用于根据屏幕尺寸加载不同的图像@mediascreenonlyand(min-device-width:0)and(max-device-width:450p

javascript - 如何检测手机浏览器的屏幕尺寸?

我正在开发一个需要在桌面和移动设备上运行的网站。现在我有一个主要内容div,它设置为屏幕宽度的70%。但是,我觉得这对于移动设备(比如手机,而不是平板电脑)来说太小了,我想把它提高到90或95%我怎么能做到这一点(比如屏幕尺寸小于5英寸)而不使用非常不可靠的浏览器嗅探?我一遍又一遍地听到“特征检测featuredetectionfeaturedetection”这句口头禅,我明白为什么这是一件好事......但我不知道这个问题要检测什么“特征”......谢谢。 最佳答案 您可以使用CSS:@mediascreenand(max-w

asp.net - 在文件上传期间使用 Javascript 获取图像尺寸

我有文件上传UI元素,用户将在其中上传图像。在这里我必须在客户端验证图像的高度和宽度。是否可以在JS中仅通过文件路径查找图片的大小?注意:如果否,是否有任何其他方法可以在客户端找到维度? 最佳答案 您可以在支持新FileAPI的浏览器上执行此操作来自W3C,使用readAsDataURLFileReader接口(interface)上的函数并将数据URL分配给img的src(之后您可以读取height和图像的width)。目前Firefox3.6支持文件API,我认为Chrome和Safari已经支持或即将支持。所以你在过渡阶段的逻

javascript - Facebook 如何根据用户屏幕自动显示正确尺寸的图像?

我注意到,当显示相册中的照片时,网络上的Facebook会巧妙地检测您的屏幕尺寸并选择正确的缩略图照片,然后为img元素选择正确的宽度和高度。我使用chrome开发者工具查看Facebook中图像的自然显示宽度和高度。这是在20.41"x12.8"显示器上以1600x1200分辨率查看的照片示例请注意它如何提到图像src是_o.jpg后缀,自然尺寸是1529x2048,而当前图像元素尺寸是432x578这是在14英寸macbookair上以1440x900分辨率显示的相同图像。这个使用了你看不清楚的后缀_n,但是你可以看到自然尺寸是717x960而当前图像元素尺寸是538x720我发现

javascript - 防止在特定屏幕尺寸的智能手机上滚动

我只需要防止在发生特定事件时使用JS和/或JQuery在移动设备上滚动。我有一个图形,当用户打开图形时,滚动将被禁用,一旦关闭,滚动将再次启用。目标设备是:从4s到最新的任何iPhone(包括5+6)以下是我尝试过但没有成功的一些事情:方法一:document.addEventListener('touchstart',this.touchstart);document.addEventListener('touchmove',this.touchmove);functiontouchstart(e){e.preventDefault()}functiontouchmove(e){e.

javascript - 为什么在 IE8 上的 JavaScript 中访问图像的尺寸如此昂贵?

我必须处理大量图像。首先,我需要检查图片的大小是否大于50x60,适当增加坏图的计数器。我遇到的问题是n.width的速度/n.height在InternetExplorer8上非常低。我检查了n.offsetWidth,n.clientWidth但它们在速度方面都是相同的。我不能使用n.style.width但是,因为这个值并不总是设置在上我感兴趣的标签。考虑以下代码:JavascriptvarTest={processImages:function(){varfS=newDate().getTime();varminimagew=50,minimageh=60;varimgs=do