この記事では、html2canvas で高解像度の画像を div に保存し、みんなで共有する例を紹介します。詳細は次のとおりです。
http://www.bootcdn.cn/ (html2canvans で検索できます)
1. html2canvas バージョンを選択します (このバージョンは鮮明な画像を確保するために拡大できます)
デフォルトで生成されるキャンバス イメージは、Retina デバイスでは非常にぼやけてしまいます。これを 2x イメージに処理すると、この問題を解決できます。
var w = $(#code).width();var h = $(#code).height();//キャンバスの幅と高さをコンテナの幅と高さの 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);//次に、キャンバスを拡大縮小し、画像を 2 倍にしてキャンバス上に描画します context.scale(2,2);html2canvas(document.querySelector(#code), { Canvas: Canvas, onrendered: function (キャンバス) { ... }});ダウンロード方法：
.on('click','.download',function(){ $('#mycanvas').remove(); var _height=$('.skinReport').height(); //一番上までスクロール$ ( 'html, body').animate({scrollTop:0}); if(confirm('スキンテストレポートをダウンロードしますか?')) { setTimeout(function(){ var Canvas = document.createElement(canvas)、w=$('#skinReport').width()、h=$('#skinReport').height(); Canvas.width = w * 2; Canvas.height = h * 2 ; キャンバス.スタイル.幅 = w + ピクセル; キャンバス.スタイル.高さ = h + ピクセル; Canvas.getContext(2d);//次に、キャンバスを拡大縮小し、画像を 2 倍にしてキャンバス上に描画します context.scale(2,2); html2canvas(document.getElementById('skinReport'), { allowedTaint: false, taintTest: true 、キャンバス: キャンバス、onrendered: function(canvas) { Canvas.id = mycanvas; Canvas.style.display = 'none'; document.body.appendChild(canvas); //base64 イメージ データを生成します imgData = Canvas.toDataURL(type); //newImg = document.createElement(img); //newImg.src = dataUrl; appendChild(newImg); //console.log(imgData); var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/); return 'image/' + r; / 画像データを処理し、MIME タイプを置き換えます imgData = imgData.replace(_fixType(type),'image/octet-stream') /** * ファイルをローカルに保存します* @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 = データ; save_link.download = ファイル名; event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, 0, null); // ダウンロード後問題名 var filename = aname+'Skin Test Report' + (new Date()).getTime() + '.' + type; }、幅:1512、高さ:15000 }) },2500) } else { return;以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。