html2 キャンバスはブラウザのスクリーンショットを実装します-htmlチュートリアル-php.cn

html2 キャンバスはブラウザのスクリーンショットを実装します

小云云

リリース： 2018-01-29 09:45:25

オリジナル

2640 人が閲覧しました

html2canvasを使用してブラウザのスクリーンショットを実装するには、サーバー環境に実装する必要があります。この記事では、html2canvas を使用してブラウザのスクリーンショットを実装するためのサンプルコードに関する情報を中心に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

機能

html2canvasは純粋なJSを介してブラウザ側でスクリーンショットを撮ることができますが、スクリーンショットの精度を向上させる必要があり、一部のCSSが認識できないため、元の画像スタイルをcanvasで完全に表示できません

/*多行溢出省略就不行，只能超出隐藏了*/
     .book_inf{
            position: relative; 
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

ログイン後にコピー

サポートされているブラウザ

Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Safari 6+

基本文法

/*参数：
* #screenshots 所需要截图的元素id，截图后要执行的函数，
* backgroundColor 配置项背景色
* canvas为截图后返回的最后一个canvas
*/
function screenshotsImg(){
       html2canvas(document.querySelector("#screenshots"),{
            backgroundColor: &#39;transparent&#39;,// 设置背景透明
        }).then(canvas => {
            canvasTurnImg(canvas) //保存的图片格式转换方法
        });
    }

ログイン後にコピー

利用可能な設定項目

コンソールにイベントを記録するかどうか。---console.log()に情報を出力しますproxy文字列未定義クロスオリジン画像のロードに使用されるプロキシのURL。空のままにすると、クロスオリジン画像はロードされません。---プロキシアドレスtaintTestブール値。 true各画像を描画する前にキャンバスを汚すかどうかをテストするかどうか -- レンダリング前に画像をテストするかどうかtimeoutnumber0画像をロードするタイムアウト (ミリ秒単位) に設定します。 0 に設定すると、タイムアウトは発生しません。---画像の読み込み遅延、デフォルトの遅延はミリ秒単位で 0 です1. キャンバスから画像メタデータを直接抽出します2. MIME タイプを image/octet-stream に変更し、ブラウザに直接ダウンロードを強制します

パラメータ名	タイプ	デフォルト値	説明
allowTaint	boolean	false	クロスオリジン画像の汚染を許可するかどうかキャンバス --- クロスドメインを許可します
background	string	#fff	DOM で何も指定されていない場合は、キャンバスの背景色を設定します --- 設定されていない場合は、キャンバスの背景色を設定します。デフォルトは白です。騙されたので、backgroundColor
height	number	null	に変更しました。nullの場合、ウィンドウの高さ全体でレンダリングします。 -キャンバスの高さ設定
letterRendering	boolean	false	各文字を個別にレンダリングするかどうか



width	number	null	null の場合、キャンバスの幅をピクセル単位で定義します。ウィンドウの全幅。---キャンバス幅
useCORS	boolean	false	プロキシに戻る前に、CORS が提供するクロスオリジン画像の読み込みを試行するかどうか -- クロスオリジンプロキシ
	画像形式を設定します

  // 图片导出为 png 格式
        var type = &#39;png&#39;;
        var imgData = canvas.toDataURL(type);

ログイン後にコピー

3. 画像をローカルにダウンロードします

/**
 * 获取mimeType
 * @param  {String} type the old mime-type
 * @return the new mime-type
 */
var _fixType = function(type) {
    type = type.toLowerCase().replace(/jpg/i, &#39;jpeg&#39;);
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return &#39;image/&#39; + r;
};
   
// 加工image data，替换mime type
imgData = imgData.replace(_fixType(type),&#39;image/octet-stream&#39;);

ログイン後にコピー