Directorio de artículos
Como alguien que escribe regularmente un blog, a veces en el contenido de intercambio de información de microblogs en el blog, no sé cuándo empezar, la Internet doméstica pierde cada vez más la fe, todos los fabricantes están tratando de crear un "simplemente no podía avanzar" Islas aisladas para lograr el propósito de mejorar la "adherencia del usuario". Tome Weibo como ejemplo. Los enlaces externos en Weibo siempre se convertirán en direcciones cortas y no se pueden redirigir a través del navegador integrado de Weibo. Incluso si abre el enlace copiando manualmente el enlace, aún necesita al menos dos pasos para ver la "verdadera cara de Lushan". Dibujar / copiar los malos hábitos hay un libro simple , tómate el tiempo para hacer enlaces de terceros a la página de Jumplines, excepto que no quieres agregarle una etiqueta, aún tienes que copiar y pegar manualmente. Hablando francamente, creo que la Internet doméstica está perdiendo la fe. Parece que el comercio electrónico, la logística, la comida para llevar, el taxi, el pago ... uno tras otro penetra poco a poco en todos los aspectos de nuestra vida, convirtiéndose en una auténtica "Internet +", pero en la actual avalancha de información, Cada vez es más difícil encontrar información realmente valiosa ... Dado que los enlaces externos están destinados a ser bloqueados, entonces sigo la tendencia de mala gana y envío "capturas de pantalla largas". Así que, a continuación, compartiré con ustedes la realización de la página web "capturas de pantalla largas". "Las ideas comunes, espero que sean de ayuda para los amigos que tienen problemas o necesidades similares.
A través del navegador
Para lograr una captura de pantalla larga de una página web, obviamente se trata de la página web, y ¿quién se ocupa más de la página web? ¡Naturalmente, es el navegador que usamos todos los días! Afortunadamente, ya sea Chrome o Firefox, podemos usarlos para hacer realidad esta idea.
Cromo
Para Chrome, solo necesitamos "F12" para abrir las herramientas de desarrollador, y encontrar la pestaña "Consola", ingrese el Ctrl + Shift + Pcomando en el lugar donde generalmente se ingresa el script JavaScript (es decir, la pestaña Consola) , y luego obtendrá un VSCode similar La ventana de entrada de la experiencia de la línea de comandos, a continuación, escriba: Capture full size screenshoty presione Entrar. En este punto, podemos obtener una captura de pantalla completa de la página. Y si quiere interceptar una parte de la página, puede especificar un elemento DOM se selecciona de la misma manera entre el mandato: Capture node screenshot. Además, más generalmente tomada en la gama del contenido visible del navegador se puede utilizar: Capture screenshot. Quizás en comparación con la herramienta general de captura de pantalla de arrastrar y soltar, esta solución es un poco torpe y simple, pero realmente puede implementar nuestras ideas a la perfección y no es necesario instalar extensiones ni complementos.
Firefox
Para Firefox, tiene su propia función de captura de pantalla y admite capturas de pantalla de arrastrar y soltar. Para aquellos de nosotros que necesitamos capturas de pantalla largas, lo único que tenemos que hacer es hacer unos pocos clics en los datos. De hecho, es más simple y amigable que escribir la línea de comando. Un punto, personalmente prefiero usar Firefox, porque Chrome está cambiando de un asesino de dragones a un dragón malvado. Para hacer que el mundo no solo sea Chrome como un núcleo de navegador, decidí apoyar Firefox. En 2020, debido a la epidemia, Mozila Despidió al 25% de su fuerza laboral y a unas 250 personas. Es posible que esta empresa, que casi se basa en el idealismo para mantener el kernel de Gecko, ya no pueda competir con Chrome de Google. Todos hemos experimentado la era en la que solo había un navegador en el mundo. Su nombre Se llama IE6 y es un suspiro, es simplemente la historia de la romántica desaparición de la Web abierta.
A través del selenio
En mi conocimiento, donde hay un navegador, hay un rastreador, y donde hay un rastreador, hay Selenium. ¿Cómo puede el marco de pruebas de automatización de IU originalmente bueno ayudar a Chun a convertirse en un rastreador de abusos? De hecho, la razón principal es que proporciona un entorno que puede interactuar con el navegador. En cierto sentido, Selenium , PhantomJS y Playwright pueden considerarse tecnologías similares. Aquí tomamos Selenium como ejemplo y usamos Selenium para lograr la longitud de la página web. Hay dos formas principales de tomar capturas de pantalla: una es construir un navegador lo suficientemente grande y luego llamar al save_screenshot()método para tomar la captura de pantalla; la otra es desplazar la captura de pantalla a través de la barra de desplazamiento "arrastrar y soltar" y luego PILunir. Mira la implementación del código específico:
def save_screenshot(url, fp_pic):
fireFoxOptions = webdriver.FirefoxOptions()
fireFoxOptions.set_headless()
driver = webdriver.Firefox(firefox_options=fireFoxOptions)
driver.get(url)
time.sleep(1)
# 设置浏览器宽度和高度
width = driver.execute_script(
"return document.documentElement.scrollWidth"
)
height = driver.execute_script(
"return document.documentElement.scrollHeight"
)
driver.set_window_size(width, height)
time.sleep(1)
# 截图
driver.save_screenshot(fp_pic)
driver.close()
Aquí estoy usando el controlador de Firefox. Si te gusta Chrome, puedes hacerlo según tus preferencias personales. Aquí supongo que dominas Python y Selenium. Si necesitas un poco de conocimiento auxiliar, puedes consultar el artículo de este blogger: Como técnico, Así es como persigues al fantasma de la hoja . Este método de "captura de pantalla larga" es muy simple de implementar, pero debido a que necesita construir un navegador muy "grande", si la adaptación de la página no se hace bien, puede ocurrir el problema de la deformación del elemento de la página. En segundo lugar, esto El tamaño de las imágenes generadas por este método es generalmente relativamente grande, por lo que la vista general se debe principalmente a estas dos deficiencias. La implementación de "capturas de pantalla de desplazamiento" es un poco más complicada, porque involucra una pequeña parte de los cálculos:
def save_screenshot2(url, fp_pic):
fireFoxOptions = webdriver.FirefoxOptions()
fireFoxOptions.set_headless()
driver = webdriver.Firefox(firefox_options=fireFoxOptions)
driver.fullscreen_window() # 全屏窗口
driver.get(url)
window_height = driver.get_window_size()['height'] # 窗口高度
page_height = driver.execute_script(
'return document.documentElement.scrollHeight'
) # 页面高度
driver.save_screenshot('temp.png')
if page_height > window_height:
n = page_height // window_height # 需要滚动的次数
base_mat = np.atleast_2d(Image.open('temp.png')) # 打开截图并转为二维矩阵
for i in range(n):
driver.execute_script(
f'document.documentElement.scrollTop={window_height * (i+1)};'
)
time.sleep(.5)
driver.save_screenshot(f'temp_{i}.png') # 保存截图
mat = np.atleast_2d(Image.open(f'temp_{i}.png')) # 打开截图并转为二维矩阵
base_mat = np.append(base_mat, mat, axis=0) # 拼接图片的二维矩阵
Image.fromarray(base_mat).save(fp_pic, format='PNG')
os.remove(f'temp_{i}.png')
os.remove('temp.png')
driver.quit()
No hay gran problema con este esquema, pero si su página web tiene un diseño con un encabezado fijo cuando la página se desplaza, como un estilo similar al blog de un blogger, este esquema tendrá un pequeño problema en este momento, cada vez que intercepte Se incluirá la parte de la cabeza, que es un poco diferente al efecto que queremos lograr. Si se puede calcular la altura de la cabeza, y esta altura se tiene en cuenta a la hora de tomar capturas de pantalla o coser, este problema se puede solucionar por completo, pero este problema Pasó de un problema general a un problema parcial. Efectivamente, no hay una solución perfecta ...
A través de JavaScript
Alguien podría decir, el blogger es excéntrico, ¿por qué ha salido Python y JavaScript, uno de los tres espadachines frontales, aún no ha aparecido? Bueno, quiero decir sobre esto, no es necesario que lo digas, sé que es ** "La vida es corta, uso Python" **? Hay una biblioteca llamada html2canvas en el mundo front-end de otros. ¿Has oído hablar de un blogger? Sonreí, no miré mi Rolex porque no tengo un Rolex. Bueno, ya que esta biblioteca se menciona aquí, hablemos de la idea de realización de esta biblioteca ¿No lo dijo la gente? Todo lo que se puede lograr finalmente se puede lograr con JavaScript. Echemos un vistazo a la implementación del código específico. Aquí, primero prepare un archivo HTML:
<!DOCTYPE html>
<head>
<script src='./html2canvas.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body style="overflow: hidden;">
<div id="app" style="height: 768px; overflow: hidden;">
请输入URL: <input type="text" v-model="url">
<button v-on:click="capture">截取</button>
<hr>
<iframe
id="view"
v-bind:src='url'
width="100%"
height="100%"
frameborder="0"
ref="view">
</iframe>
</div>
</body>
Es muy simple: ingrese una dirección, obtenga una vista previa a través de un iframe y haga clic en el botón para tomar una captura de pantalla. El código JavaScript se proporciona a continuación:
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'https://regularly-archive.github.io/2020/Matrix/',
},
methods: {
capture: function() {
var self = this;
var iframe = self.$refs.view.contentWindow;
var iframeBody = iframe.document.getElementsByTagName('body')[0]
html2canvas(iframeBody).then(canvas => {
document.body.appendChild(canvas);
//canvas转图片
let canvasImg = canvas.toDataURL("image/png");
//模拟下载
var a = document.createElement('a')
a.href = canvasImg;
a.download = self.url;
let event = document.createEvent("MouseEvents")
event.initMouseEvent("click", true, false,
window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
a.dispatchEvent(event)
});
}
}
});
</script>
Los resultados son los siguientes, puede hacer clic aquí para acceder a la demostración de demostración en línea:
El uso de iframes aquí puede presentar problemas entre dominios. Puedes consultar este artículo mío: Hablemos sobre el amor y el odio entre dominios en la interfaz , y html2canvas en sí mismo proporciona soluciones a problemas entre dominios. Puede consultar aquí: http://html2canvas.hertzen.com/configuration .
A través de herramientas de terceros
Sé que a los programadores les gusta tirar solos, si es algo que nunca se ha visto antes sugiero tirar, porque los sueños aún son necesarios, ¿y si se realiza? Y nuestro círculo también tiene un dicho clásico: "No hagas ruedas repetidamente". Por lo tanto, el bloguero encontró algunas ruedas para tu referencia. Aquellos a quienes no les gusta escribir código en invierno pueden recolectar estas herramientas. Este invierno es demasiado frío, ¿qué tan frío hace? Probablemente no quiera reírme cuando escuche una broma. En palabras del maestro Luo Xiang, esto se llama un intento divertido.
wkhtml2image
La serie wkhtml , una herramienta de línea de comandos, puede convertir archivos HTML locales o páginas web a las que apuntan URL remotas en imágenes. También hay wkhtml2pdf en esta serie de productos. Como su nombre indica, las páginas web se pueden convertir a PDF. Básicamente, no hay ningún problema en el uso real. La imagen de salida 1: 1. La única desventaja de restaurar páginas web es que ocasionalmente pierden estilos, especialmente cuando se introducen JavaScript o CSS de terceros en la página. La URL remota general es un poco más estable que el HTML local. El factor de recomendación es de 4 estrellas.
Escoge de
PickFrom , un servicio de transferencia de páginas web en línea, solo complete la URL y haga clic en el botón. Proporciona la función de obtener una vista previa de parte de la imagen de forma gratuita. Debe pagar una tarifa determinada para ver y descargar la imagen completa. La calidad del servicio es buena, pero no es adecuada para nosotros. Hijos de familias pobres que se ven obligados a "prostitutas blancas", los tiranos locales son libres, coeficiente de recomendación: 4 estrellas
Tiomg
Tiomg , la siguiente es la recomendación principal del blog. Brinda el mismo servicio que PickFrom . La única diferencia es que es completamente gratis. Ahora uso esta herramienta principalmente para generar "capturas de pantalla largas". Sí, traicioné lo anterior. El código que escribí, ¿por qué necesitas reinventar la rueda? A veces no entiendo por qué a las empresas nacionales les gusta el software "grande y completo", y quieren tener todas las características de sus competidores, pero está claro que todos se han "metido" en esto, ¿por qué no probar una ruta diferenciada? ¿Qué? ¡Quizás sea porque hay demasiada competencia de gama baja! Factor de recomendación: 5 estrellas
¡Realmente no hay motivación para escribir cosas técnicas en invierno! Con respecto al tema de las "capturas de pantalla largas", he estado siguiendo y experimentando hace casi una semana, así que permítame escribir una "hidrología" de vez en cuando la próxima vez. Con respecto a "El video es una serie que no puede ser P", debido a que Dlib es realmente molesto de instalar, y el algoritmo de 68 puntos de características proporcionado por OpenCV actualmente solo es compatible con C ++, inevitablemente tomará un tiempo investigar. Bien, escribamos este blog aquí por ahora. , El blogger entra primero en hibernación, ¡adiós!