ピット前に登るのスクリーンショット！

多くのWebプロジェクトでは、私たちは私たちの写真をバック保持したページの描画処理に責任があるが、また、フロントエンドをキャプチャすることができますが、私はそれを記録したので、仕事で遭遇したため、多くの予期せぬバグが存在します。

前提：その後、舞台裏の性別の名前の2次元コード画像やプロフィール写真のためのパスとページを表示し、それは非常にシンプルですが、私たちは、二次元コードアバター名前セックス合成画像を保存する必要があります。

ツールプラグイン：html2canvas.jsとcanvas2images.js、今キャンバスページに変換し、[保存作り、絵のキャンバスに変換します。コードを見てみましょう！

VARテスト= document.getElementsByClassName（ "ボックス"）[0]; // あなたがショットを必要とするDOM要素の
VAR幅= test.offsetWidth; // 取得DOM幅
のvar高さ= test.offsetHeight; // 取得DOMの高さの

VARキャンバス= document.createElement（「キャンバス」）; // キャンバスを作成
するvar規模= 2 ;携帯電話のピクセル密度をそのショットの明確性向上のためにスケーリングキャンバスを実施するため
canvas.width =幅*スケールを; // 定義されたキャンバスの幅*スケール 
canvas.height *スケール=高; // キャンバスの高さ*スケーリング定義 
canvas.getContext（ "2D" ）.scale（スケール、スケール）; 

html2canvas（テスト、{ 
    useCORSを：trueに、かどうかは、よりクロスドメイン、またはテーマの背景データ可能、CORSを使用してサーバからイメージをロードしようとする
    ログを：trueに、// 切り替えログ、内部ビューhtml2canvas実行が流れ容易にするための
    キャンバスを：キャンバス、
    幅：幅、//オプションの
    高さを：高さ、//オプションの
    規模：規模、//オプション

   //以上为基本配置;
    onrendered: function(canvas) {
        var context = canvas.getContext("2d");
        //消除锯齿,重要
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        var img = new Image();创建一个图片对象
        var url = canvas.toDataURL('image/jpeg');
        img.src = canvas.toDataURL('image/jpeg');toDataURL()该方法是将canvas转成base64编码的图片;
        document.body.appendChild(img);可选择是否将图片渲染到页面上
        //那该如何将截好的图片保存到手机上呢？这是调用了H5+的方法,自行参考
        var bitblmap = new plus.nativeObj.Bitmap('bitblmap');
        bitblmap.loadBase64Data(url,function(){
            bitblmap.save("路径",{配置参数},successcallback,errorcalllback)
        },function(){mui.toast("保存失败")}
    }

画像のシャープネスの問題（ズーム設定）を保存、質問白側の黒バー（アンチエイリアシング）に画像を撮影し、画像サイズは、適切な質問（書かれた、インターセプト要素の幅と高さ、使用の位置にないようにしよう）ではありません。

上記フロントエンドショットで、かつ迅速にそれを試してみることを学びました。PC-ショットスケーリングを必要とせずに直接保存、構成された、問題ありません。

ピット前に登るのスクリーンショット！

おすすめ