html2canvas を使用してブラウザのスクリーンショットを実装するには、サーバー環境に実装する必要があります。
効果html2canvasは純粋なJSを介してブラウザ側でスクリーンショットを取得できますが、スクリーンショットの精度を向上させる必要があり、一部のCSSが認識できないため、元の画面スタイルをcanvasで完全に表示できません。
/*複数行のオーバーフローを省略することはできません。非表示にすることのみ可能です*/ .book_inf{position:relative; overflow:hidden; -webkit-line-clamp; : 2; - webkit-box-orient: 垂直;サポートされているブラウザ/*パラメータ: * #screenshots 必要なスクリーンショットの要素 ID、スクリーンショットの取得後に実行される関数、* backgroundColor 設定項目の背景色 * Canvas は、スクリーンショットの取得後に返される最後のキャンバスです */function ScreenshotsImg(){ html2canvas (document.querySelector( #screenshots),{backgroundColor: 'transparent',//背景を透明に設定します}).then(canvas => { CanvasTurnImg(canvas) //保存画像形式の変換方法});利用可能な設定項目| パラメータ名 | タイプ | デフォルト値 | 説明する |
|---|---|---|---|
| 汚染を許可する | ブール値 | 間違い | クロスオリジン画像によるキャンバスの汚染を許可するかどうか ---クロスオリジンを許可します |
| 背景 | 弦 | #fff | キャンバスの背景色、DOM で何も指定されていない場合は、透明に未定義を設定します。デフォルトの白が設定されていない場合、これは罠です。backgroundColor に変更しました。 |
| 身長 | 番号 | ヌル | キャンバスの高さをピクセル単位で定義します。null の場合、ウィンドウの高さ全体でレンダリングされます。---キャンバスの高さの設定。 |
| 手紙のレンダリング | ブール値 | 間違い | 各文字を個別にレンダリングするかどうか。letter-spacing を使用する場合に必要です。---letter-spacing が設定されている場合に便利です。 |
| ロギング | ブール値 | 間違い | イベントをコンソールに記録するかどうか。---console.log() に情報を出力します。 |
| プロキシ | 弦 | 未定義 | クロスオリジン イメージのロードに使用されるプロキシの URL。空のままにすると、クロスオリジン イメージはロードされません。---プロキシ アドレス。 |
| テインテスト | ブール値 | 真実 | 各画像を描画する前にキャンバスを汚すかどうかをテストするかどうか -- レンダリング前に画像をテストするかどうか |
| タイムアウト | 番号 | 0 | 画像読み込みのタイムアウト (ミリ秒単位)。0 に設定すると、タイムアウトは発生しません。---画像読み込み遅延。デフォルトの遅延は 0 (ミリ秒単位)。 |
| 幅 | 番号 | ヌル | キャンバスの幅をピクセル単位で定義します。null の場合、ウィンドウの全幅でレンダリングされます。---キャンバスの幅 |
| CORSを使用する | ブール値 | 間違い | プロキシ - クロスオリジン プロキシに戻る前に、CORS が提供するクロスオリジン イメージのロードを試行するかどうか |
1. キャンバスから画像メタデータを直接抽出する
// 画像を png 形式でエクスポートします var type = 'png' var imgData = Canvas.toDataURL(type);
2. MIME タイプを image/octet-stream に変更して、ブラウザに直接ダウンロードを強制します。
/** * mimeType を取得 * @param {String} 古い MIME タイプを入力 * @return 新しい MIME タイプを返す */var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i) , 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;};データ、MIME タイプを置き換えますimgData = imgData.replace(_fixType(type),'image/octet-stream');3. イメージをローカルにダウンロードします
/** * ファイルをローカルに保存 * @param {String} data ローカルに保存する画像データ * @param {String} filename ファイル名 */var saveFile = function(data, filename){ var save_link = document.createElementNS ('http ://www.w3.org/1999/xhtml', 'a'); save_link.href = データ; var イベント = document.createEvent('MouseEvents');event.initMouseEvent('click'、true、false、ウィンドウ、0、0、0、0、0、false、false、false、0、null);イベント);}; // ダウンロードされたファイル名 var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;//ダウンロード保存ファイル(imgData,ファイル名);場合
場合
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。