定期的にブログを書いている私は、ブログ のマイクロブログ 情報共有コンテンツで、いつ始めればいいのかわからず、国内のインターネットはますます信頼を失い、すべてのメーカーが「前進できなかった」を作ろうとしています。 「ユーザーの粘着性」を高める目的を達成するための孤立した島。例としてWeiboを取り上げます。Weiboの外部リンクは常に短いアドレスに変換され、Weiboの組み込みブラウザを介してリダイレクトすることはできません。リンクを手動でコピーしてリンクを開いた場合でも、「ルシャンの素顔」を表示するには、少なくとも2つの手順が必要です。悪い習慣を描いたりコピーしたりするのは 簡単な本 です。ラベルを追加したくない場合を除いて、サードパーティのリンクのジャンプラインページを実行するのに時間がかかります。手動でコピーして貼り付ける必要があります。率直に言って、国内のインターネットは信頼を失っていると思います。eコマース、ロジスティクス、持ち帰り、タクシー、支払い...次々と私たちの生活のあらゆる側面に浸透し、真の「インターネット+」になりますが、今日の情報の洪水では、本当に価値のある情報を見つけるのはますます難しくなっています...外部リンクはブロックされる運命にあるので、私はしぶしぶトレンドをたどって「長いスクリーンショット」を送信します。次に、Webページ「長いスクリーンショット」の実現について説明します。 「共通の考えですが、同じような問題やニーズを抱えている友人に役立つことを願っています。
ブラウザを介して
ウェブページの長いスクリーンショットを作成するために、明らかにあなたはウェブページを扱っています、そして誰がそのウェブページを最も扱っていますか？当然、私たちが毎日使っているブラウザです！幸い、ChromeでもFirefoxでも、これらを使用してこのアイデアを実現できます。
クロム
Chromeの場合、開発者ツールを開いて「コンソール」タブを見つけ、JavaScriptスクリプトが通常入力される場所（つまり、「コンソール」タブ）にCtrl + Shift + Pコマンドを入力するだけで、「F12」が必要になります。そうすると、同様のVSCodeが得られます。コマンドラインエクスペリエンスの入力ウィンドウで、次に：Capture full size screenshotと入力し、Enterキーを押します。この時点で、ページの完全なスクリーンショットを取得できます。また、ページの一部をインターセプトする場合は、次のコマンドを入力するのと同じ方法でDOM要素が選択されるように指定できますCapture node screenshot。さらに、通常はブラウザの表示コンテンツの範囲で使用できますCapture screenshot。おそらく、一般的なドラッグアンドドロップスクリーンショットツールと比較すると、このソリューションは少し不器用でシンプルですが、拡張機能やプラグインをインストールしなくても、私たちのアイデアを完全に実装できます。
Firefox
Firefoxの場合、独自のスクリーンショット機能があり、ドラッグアンドドロップのスクリーンショットをサポートします。長いスクリーンショットが必要な場合は、データを数回クリックするだけで済みます。コマンドラインを入力するよりも簡単で使いやすいです。個人的には、Chromeがドラゴンスレイヤーから邪悪なドラゴンに変わっているので、Firefoxを使用することを好みます。Chromeを世界で唯一のブラウザカーネルにするために、Firefoxをサポートすることにしました。2020年、流行のため、Mozila従業員の25％と約250人を解雇しました。Geckoカーネルの維持を理想主義にほぼ依存しているこの会社は、GoogleのChromeと競合できなくなる可能性があります。私たちは皆、世界にブラウザが1つしかない時代を経験しました。その名前それはIE6と呼ばれ、ため息をついています。それは単にオープンWebのロマンチックな終焉の歴史です。
セレニウムを通して
私の認識では、ブラウザがあり、クローラーがあり、クローラーがあるところに、Seleniumがあります。元々優れていたUI自動化テストフレームワークは、Chunが悪用のクローラーになるのにどのように役立ちますか？実際には、主な理由は、ある意味では。それはブラウザと対話できる環境を提供することであるセレン、PhantomJS、および劇作家は、すべて同様の技術を考えることができる。ここでは例として、セレンを取り、ウェブページの長さを達成するためにセレンを使用しますスクリーンショットを撮る主な方法は2つあります。1つは十分な大きさのブラウザを作成し、save_screenshot()メソッドを呼び出してスクリーンショットを撮る方法です。もう1つは、スクリーンショットを「ドラッグアンドドロップ」スクロールバーでスクロールしてPILからステッチする方法です。特定のコード実装を見てください。
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()
ここで私は、Firefoxのドライバを使用していますクロムのような場合は、個人の好みに応じてそれを行うことができますここで私はあなたがPythonとセレンを習得していることを前提としていますが、少しの補助知識が必要な場合は、このブロガーの記事を参照してくださいすることができます。。。技術的な家として、これは、ブレードからゴーストを追いかける方法です。この「長いスクリーンショット」の方法は実装が非常に簡単ですが、非常に「大きな」ブラウザを構築する必要があるため、ページの適応がうまく行われないと、ページ要素の変形の問題が発生する可能性があります。この方法で生成される画像のサイズは一般に比較的大きいため、一般に、これら2つの欠点が主に発生します。「スクリーンショットのスクロール」の実装は、計算のごく一部を伴うため、もう少し複雑です。
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()
このソリューション自体はそれほど問題ではありませんが、ブロガーのブログに似たスタイルなど、ページがスクロールしたときにヘッドが固定されたデザインがWebページにある場合、このソリューションは、傍受するたびに、現時点では少し問題があります。達成したい効果とは少し違う頭の部分が含まれます。頭の高さを計算でき、スクリーンショットやステッチの際にこの高さを考慮に入れると、この問題は完全に解決できますが、この問題はそれは一般的な問題から部分的な問題に変わりました。確かに、完璧な解決策はありません。
JavaScriptを介して
ブロガーは風変わりだと言う人もいるかもしれませんが、なぜPythonが登場し、3人のフロントエンドの剣士の1人であるJavaScriptがまだ登場していないのでしょうか。さて、これについて言いたいのですが、言う必要はありません。**「人生は短いです。私はPythonを使用しています」**ですか？他のフロントエンドの世界にはhtml2canvasというライブラリがあります。ブロガーのことを聞いたことがありますか？私は微笑んだ。私はロレックスを持っていないので、ロレックスを見なかった。さて、ここでこのライブラリについて言及しているので、このライブラリの実現のアイデアについて話しましょう。人々はそれを言わなかったのですか？達成できることはすべてJavaScriptで最終的に達成できます。特定のコード実装を見てみましょう。ここでは、最初に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>
とても簡単です。住所を入力し、iframeでプレビューし、ボタンをクリックしてスクリーンショットを撮ります。JavaScriptコードを以下に示します。
<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>
結果は次のとおりです。ここをクリックして、オンラインデモデモにアクセスできます。
ここでiframeを使用すると、クロスドメインの問題が発生する可能性があります。私のこの記事を参照してください。フロントエンドでのクロスドメインの愛と憎しみについて話しましょう。html2canvas自体がクロスドメインの問題の解決策を提供します。ここで参照できます。http://html2canvas.hertzen.com/configuration。
サードパーティのツールを介して
プログラマーは自分で投げるのが好きだということは知っていますが、今まで見たことのないものなら、夢はまだ必要なので、実現したらどうなるのでしょうか。また、私たちのサークルには、「ホイールを繰り返し作らないでください」という古典的な言葉もあります。そのため、ブロガーは参考のためにいくつかのホイールを見つけました。冬にコードを書きたくない人は、これらのツールを集めることができます。 、この冬は寒すぎますが、どれくらい寒いですか？冗談を聞いても笑いたくないでしょう。羅翔先生の言葉を借りれば、これはおかしな試みと呼ばれています。
wkhtml2image
コマンドラインツールであるwkhtmlシリーズは、リモートURLが指すローカルHTMLファイルまたはWebページを画像に変換できます。このシリーズの製品にはwkhtml2pdfもあります。名前が示すように、WebページはPDFに変換できます。基本的に実際の使用に問題はありません。出力画像1： 1. Webページを復元することの唯一の欠点は、特にサードパーティのJavaScriptまたはCSSがページに導入された場合に、スタイルが失われることがあることです。全体的なリモートURLは、ローカルHTMLよりも少し安定しています。推奨係数：4つ星。
から選びます
オンラインのウェブページ転送サービスであるPickFromは、URLを入力してボタンをクリックするだけで、画像の一部を無料でプレビューする機能を提供します。画像全体を表示およびダウンロードするには、一定の料金を支払う必要があります。サービス品質は問題ありませんが、私たちには適していません。 「白人売春婦」を強いられる貧しい家庭の子供たち、地元の暴君は無料、推奨係数：4つ星
Tiomg
Tiomg、次はブログの主な推奨事項です。PickFromと同じサービスを提供します。唯一の違いは完全に無料であるということです。現在は主にこのツールを使用して「長いスクリーンショット」を生成しています。はい、上記を裏切っています。私が書いたコード、なぜ私は車輪を再発明する必要があるのですか？国内企業が「大きくて完全な」ソフトウェアを好む理由がわからず、競合他社のすべての機能を備えたいと思うこともありますが、誰もがこれに「巻き込まれた」ことは明らかです。差別化されたルートを試してみませんか何？ローエンドの競争が多すぎるからかもしれません！推奨係数：5つ星
冬に技術的なことを書く動機は本当にありません！「長いスクリーンショット」のトピックについては、ほぼ1週間前にフォローして実験してきましたので、次回は時々このような「水文学」を書かせてください！「ビデオはPになれないシリーズ」については、Dlibのインストールが非常に面倒で、OpenCVが提供する68機能ポイントアルゴリズムは現在C ++しかサポートしていないため、調査には必然的に時間がかかります。さて、ここでこのブログを書いてみましょう。 、ブロガーは最初に休止状態になります、さようなら！