web-dev-qa-db-ja.com

divをダウンロード可能なイメージに変換する

これは、divを画像に変換し、html2canvas.jsを使用してそれをダウンロードするために使用しているコードです

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script>
<style>
    #download{
        margin:10% 40%;
    }
    .download-btn{
        padding:10px;
        font-size:20px;
        margin:0 20px;
    }
    #test{
        background:#3399cc;
        padding:50px;
    }
    .x2{
        transform: scale(2,2);
    }
</style>


   <div id="download">
      <h1 id="test">Testing Download</h1>
   </div>

    <center>
        <button id="download-window" class="download-btn">New Window</button>
        <button id="download-png" class="download-btn">Download png</button>
        <button id="download-jpg" class="download-btn">Download jpg</button>
        <button id="download-pngx2" class="download-btn">Download pngx2</button>
    </center>


<script>
    $('#download-window').click(function(){

            html2canvas($('#download'), 
             {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL("image/png");
                    window.open(img);
                }
             });
            });

    $('#download-png').click(function(){

            html2canvas($('#download'), 
             {
                onrendered: function (canvas) {
                var a = document.createElement('a');
                    a.href = canvas.toDataURL("image/png");       
                    a.download = 'image.png';
                    a.click();
                }
             });
            });

    $('#download-pngx2').click(function(){
         $('#download').addClass('x2');
            html2canvas($('#download'), 
             {
                onrendered: function (canvas) {
                var a = document.createElement('a');
                    a.href = canvas.toDataURL("image/png");       
                    a.download = 'image.png';
                    a.click();
                }
             });
        });

  $('#download-jpg').click(function(){
    html2canvas($('#download'), 
    {
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'image.jpg';
        a.click();
      }
    });
  });
</script>

ここで生成された画像は良い解像度を持っていません。

良い解像度で画像を生成する他の方法はありますか？

PHP関数を使用してこのタスクを実行できますか？

javascriptphpimagecsshtml5-canvas
11
Siren Brown

これを行う簡単な方法を次に示します。

<div id="my-node">
  You will get a image downloaded.
</div>

<button id="foo">download img</button>

<script>
var node = document.getElementById('my-node');
var btn = document.getElementById('foo');
btn.onclick = function() {
node.innerHTML = "I'm an image now."
  domtoimage.toBlob(document.getElementById('my-node'))
    .then(function(blob) {
      window.saveAs(blob, 'my-node.png');
    });
}
</script>

これがデモです： this JSFiddle 。

このフィドルでは、2つのライブラリが使用されます。
dom-to-image： https://github.com/tsayen/dom-to-image
FileSaver.js： https://github.com/eligrey/FileSaver.js/

1つ目はdomをイメージに変換するために使用され、2つ目はイメージをダウンロードするために使用されます。

Update：ブロブ形式としてimgをダウンロードするだけでなく、base64のimgを取得したい場合。あなたは以下のように行うことができます：

domToImage
    .toBlob(document.getElementById("my-node"))
    .then(function(blob) {
      saveBlobAsFile(blob, "XX.png");
    });
  // this function is to convert blob to base64 img
  function saveBlobAsFile(blob, fileName) {
    var reader = new FileReader();
    reader.onloadend = function() {
      var base64 = reader.result;
      var img = document.createElement("img");
      img.classList.add("me-img");
      img.setAttribute("src", base64);
      // insert the img to dom
      document.getElementById("bar").appendChild(img);
    };
    reader.readAsDataURL(blob);
  }

ここに FileSaver.jsは必要ありません。トリックを行うためにhtml5 api FileReaderを使用します。

5
SkuraZZ

より多くのピクセルを作成して解像度を上げます

解像度の種類はピクセル密度と同じです。より高い解像度が必要な場合、より多くのピクセルを作成する1つの試みは、比例して大きい幅と高さの2番目のキャンバスを作成し、次に_secondaryContext.scale_＆secondaryContext.drawImage(mainCanvas,0,0)を使用してメインのキャンバスコンテンツを拡大して描画します2番目のキャンバス。この大きなキャンバスを、たとえばプリンターで使用します。

これは、わかりやすさを犠牲にしてピクセル密度を上げる例です。より高い解像度が必要な理由は明記していませんが、この例は、画像をプリンターに出力する場合などに役立ちます。注：プリンターはより高い密度で印刷するため（おそらく300dpiのプリンター解像度と72/96ppiの可能性があるため）、印刷されたページは、プリンターにフィードする密度増加画像よりも鮮明になります。

_var divX2=document.createElement('canvas');
divAt2X('#download',1.5);

$('#go').on('click',function(){
    // save
    var a = document.createElement('a');
    a.href = divX2.toDataURL("image/png");       
    a.download = 'image.png';
    a.click();                
});

function divAt2X(id,upscale){
    var w=$(id).width();
    var h=$(id).height();
    html2canvas($(id),{
        onrendered:
            function(canvasDiv){
                // scale up
                ctx=divX2.getContext('2d');
                divX2.width=w*upscale;
                divX2.height=h*upscale;
                ctx.scale(upscale,upscale);
                ctx.drawImage(canvasDiv,0,0);
            }
        }
    );
}_
_        #download{
            margin:10% 20%;
        }
        .download-btn{
          padding:10px;
          font-size:20px;
          margin:0 20px;
        }
        #test{
          background:#3399cc;
          padding:50px;
        }_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='https://html2canvas.hertzen.com/build/html2canvas.js'></script>
<button id='go'>Download 1.5X</button><span>(IE/Edge don't support download)</span>
<div id="download"><h1 id="test">Testing Download</h1></div>_

html2Canvas を既に却下している場合、html2Canvasはhtml + cssを読み取ってキャンバス要素に描画するための1つのツール（おそらく唯一のツール）であるため、進むのはより困難です。

画像操作ライブラリで解像度を上げます

ImageMagick ライブラリを使用できます。特に、 ImageMagick resize メソッドは、リサンプリングを使用して.png画像の埋め込み解像度を変更し、品質を向上させます。

サーバーでヘッドレスブラウザーを使用してDivをキャプチャします

ブラウザー間の互換性が必要な場合は、 PhantomJS のようなサーバーサイズのヘッドレスブラウザーを使用できます。

PhantomJSの captureJS 拡張機能では、標準のCSSセレクターを使用してターゲットdivを指定できます。 CaptureJSを使用すると、ビューポートのサイズを指定できます-効果的にピクセル密度を上げることができます。

1
markE

100万人以上の毎日のユーザー向けの本番システムでの作業で使用した1つの良いアプローチは、サーバー側でこれを完全に実行することです。つまり、ブラウザー（Chrome）を起動します。次に、スクリーンショットを撮ります。次に、クライアントにストリーミングします。結果は非常に明確です/まったくピクセル化されていません-他のオプションはすべてかなりピクセル化されています。

1
Alex Weinstein