html2canvas はコードを image_html/css_WEB-ITnose に変換します

最近、私は Zhongcheng Translation を通じて一連の優れた記事を学び翻訳しましたが、その多くは皆さんにお勧めする価値があります。ただし、優れた技術記事には通常、コードの大きなセクションが含まれます。通常の状況では、これは問題にはなりません。Zhongcheng Translation、私のブログ、または技術記事を転載する他のプラットフォームのいずれであっても、それらは通常、構文の強調表示とコードの読み取りをサポートしているからです。

ただし、Weibo の長い Weibo など、理想的なコード サポートを提供していないパブリック プラットフォームもいくつかあります。

長い Weibo で通常のコードを編集

到着しましたプレビュー時に「自動的に圧縮」

もう 1 つの例は、WeChat 公式アカウントです。記事を貼り付けるときに、コードがある場合、コード内の一部の改行が失われます。コードが短い場合は問題なく、手動で編集できますが、長いコードの場合は、効果がひどく、編集するのが困難です:

ブログ内の通常のコード

WeChat 公開に投稿する 編集した記事で見るとひどいです

コードの形式を 1 つずつ調整すると、非常に大きな作業量になりますが、時々行う必要がある場合は大丈夫です。毎日、コード形式の編集と調整に時間を費やしていると、とても悲しいです。

さまざまな非主流 (対称コーダー向け) プラットフォームにコードを快適に投稿するには、コードを画像に変換するだけです。もちろん、変換する最も簡単な方法はスクリーンショットを撮ることです。

スクリーンショットの問題

コードをキャプチャするために、オペレーティング システムのスクリーンショット機能や他のツールのスクリーンショット機能を使用することももちろん可能です。ただし、システムのデフォルトのスクリーンショットであっても、スクリーンショット ツールであっても、特にコードが 1 つの画面を超える場合は、別の画面でキャプチャする必要があり、コードの一部を変更する場合は、それほど使いやすいわけではありません。調整して再撮影する必要がある場合があります。コードの長いセクションを含む記事の編集者にとってスクリーンショットの撮影は悪夢のような経験であり、コードをセクションに分割することは読者にとって親切ではありません。

スクリーンショットのもう 1 つの問題は、スクリーンショットの効果が使用する IDE に依存することです。たとえば、私は vim を使用して json 構成と nginx 構成を記述するのが好きです。ですが、私は Sublime Text 3 を使用します。HTML、CSS、JS を編集します。Android ネイティブ コードを作成する場合は、Android Studio を使用します。他のプログラミング言語を作成する場合は、XCode を使用する場合があります。異なる IDE インターフェイスによって切り出されるコード スタイルは異なるように見えるため、記事のスタイルが一貫しなかったり、1 つの記事内のコード スタイルが異なったりすることになります。これは、記事を完璧に表現したいと考えている著者にとっては単純にイライラすることになります。我慢できないよ。

コードを画像に変換するツールを使用します

これらのスクリーンショットの問題を解決するために、オンラインのコードから画像へのツール (github コード リポジトリ) を作成し、コードを入力に貼り付けました。ボックスにチェックを入れ、左上の をクリックします。隅にあるカメラ アイコンをクリックするか、キーボード ショートカット Ctrl+D を使用して、コードを構文が強調表示された画像に自動的に変換します。

コード セグメントが非常に長く、画面の高さを超えている場合でも、簡単に傍受できます。

構文の強調表示は Code Prettify に基づいており、40 を超えるプログラミングの構文の強調表示をサポートしています。言語。主流のプログラミング言語の自動識別 言語の種類を選択することなく、「Java、JS、HTML、C、C++、Python、PHP」などの主流のプログラミング言語を自動で識別できます。

html2canvas を使用してコードを画像に変換します。これは、ブラウザ Web ページからスクリーンショットを取得するための非常に有名なオープン ソース ライブラリです。非常に使いやすく、非常に強力です。

html2canvas の使用

html2canvas の使用は非常に簡単で、DOM 要素を渡して、コールバックを通じてキャンバスを取得するだけです。実際の使用では、次の 2 つの点に注意してください。

html2canvas(element, {   
onrendered: function(canvas) {        
// canvas is the final renderedelement    
}});

html2canvas は、要素の実際のスタイルを解析してキャンバス画像コンテンツを生成するため、要素の実際のレイアウトと視覚的な表示に関する要件があります。 。完全なスクリーンショットを撮りたい場合は、ドキュメント フローから要素を分離するのが最善です (例:position:absolute)

1. デフォルトで生成されたキャンバス画像は網膜上では非常にぼやけています
多言語サポート

var w = $("#code").width();
var h = $("#code").height();//要将 canvas 的宽高设置成容器宽高的 2 倍
var canvas = document.createElement("canvas");
canvas.width = w * 2;
canvas.height = h * 2;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
var context = canvas.getContext("2d");//然后将画布缩放，将图像放大两倍画到画布上
context.scale(2,2);
html2canvas(document.querySelector("#code"), {    
canvas: canvas,    onrendered: function(canvas) {        ...    }});

Code Prettify はデフォルトで複数の言語をサポートしているため、当初、ユーザーが手動で言語を切り替えられるように設計されていませんでしたが、CSS を表示するときにこれがうまく機能しないことがわかりました。

上記のコードでは、CSS ID セレクターがコード コメントとして認識されます。 Code Prettify の公式ドキュメントを確認すると、デフォルトでサポートされている言語には CSS が含まれておらず、CSS やその他のいくつかの言語の構文強調表示は拡張機能を通じて実装する必要があることがわかります。

拡張機能の使用

URL のハッシュを使用して拡張機能をマークします。たとえば、CSS 拡張機能を使用するには、http://code2img.test.h5jun.com/#css を使用します。 。

ハッシュを使用する利点は、ページの上部に共通言語の拡張リンクをいくつか配置することで、これらのリンクを切り替えると、ハッシュが変更されるためページが更新されないことです。

初めて拡張言語に

切り替える

場合は、対応する js ファイルをロードする必要があります:

使用許諾契約

var srcMap = {  "apollo": "lang-apollo.js?7.1.34",  
"basic": "lang-basic.js?7.1.34",  
"clojure": "lang-clj.js?7.1.34",  
"css": "lang-css.js?7.1.34",  
"dart": "lang-dart.js?7.1.34",  
"erlang": "lang-erlang.js?7.1.34",  
"go": "lang-go.js?7.1.34",  
"haskell": "lang-hs.js?7.1.34",  
"lasso": "lang-lasso.js?7.1.34",  
"lisp": "lang-lisp.js?7.1.34",  
"scheme": "lang-lisp.js?7.1.34",  
"llvm": "lang-llvm.js?7.1.34",  
"logtalk": "lang-logtalk.js?7.1.34",  
"lua": "lang-lua.js?7.1.34",  
"matlab": "lang-matlab.js?7.1.34",  
"ml": "lang-ml.js?7.1.34",  
"mumps": "lang-mumps",  
"nemerle": "lang-n.js?7.1.34",  
"pascal": "lang-pascal.js?7.1.34",  
"protocol": "lang-proto.js?7.1.34",  
"r": "lang-r.js?7.1.34",  
"rd": "lang-rd.js?7.1.34",  
"rust": "lang-rust.js?7.1.34",  
"scala": "lang-scala.js?7.1.34",  
"sql": "lang-sql.js?7.1.34",  
"swift": "lang-swift.js?7.1.34",  
"tcl": "lang-tcl.js?7.1.34",  
"latek": "lang-tex.js?7.1.34",  
"vb": "lang-vb.js?7.1.34",  
"vhdl": "lang-vhdl.js?7.1.34",  
"wiki": "lang-wiki.js?7.1.34",  
"xq": "lang-xq.js?7.1.34", 
 "yaml": "lang-yaml.js?7.1.34"
 };
 function loadPlugin(lang)
 {  
 var js = srcMap[lang.toLowerCase()];    
 if(typeof js === "string")
 {    
 var script = document.createElement("script");    
 script.src = "/static/js/" + js;    
 document.body.appendChild(script);  
 }   
 /srcMap[lang] 设为 true，表示已经加载过，下次切换就不会再加载  
 srcMap[lang] = true;    
 }

コードにより、Prettify は Apache License 2.0 を採用しており、html2canvas は

非商用ライセンス

契約を採用しているため、このプロジェクトのコードの使用、変更、配布には二重ライセンス契約が適用されます。 2つの協定を遵守します。

まとめ

一部のプラットフォームはテキストコードのサポートに適していないため、html2canvasとCode Prettifyを使用してコードを画像に変換するツールを実装しました。その機能は次のとおりです。

• JPEG Base64 画像へのオンライン変換コード

• 40 以上の異なる言語での構文ハイライトをサポート

• マルチスクリーンをサポート長いコードを画像に埋め込む

WeChat プラットフォームまたは Weibo に技術記事を投稿する必要がある場合は、それを使用できるはずです。

ご興味がございましたら、プロジェクト全体の最新バージョンをチェックしてください。