web-dev-qa-db-ja.com

html2canvasで透明色を黒ではなく白にする方法は？

Html2canvasを使用してスクリーンショットを撮ろうとしています。

var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {  
     var urlData = canvas.toDataURL("image/jpeg");  
}});

私の体の背景は透明なので、jpegのためのurlDataの背景は黒です（ブラウザのように白ではありません）。
この場合、この動作を修正して背景色を白にするにはどうすればよいですか？

html2canvas
17
Zelzer

一時的に変更しました：_html2canvas.Util.isTransparent from

__html2canvas.Util.isTransparent = function(backgroundColor) {
  return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
};
_

に

_html2canvas.Util.isTransparent = function(backgroundColor) { return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)" || backgroundColor === undefined); };

その後、バックグラウンドパラメータを設定してhtml2canvasを呼び出すだけで十分でした。

_html2canvas(screenshot_element, {
    background :'#FFFFFF',
    onrendered: function (canvas) {
      .....
    }
  });
_

私にとって...未定義の背景を透明と考えるのは理にかなっています。

17
CRK

これを試して

var body = document.getElementById("body") 
$(body).html2canvas({background:'#fff', onrendered: function( canvas ) {  
 var urlData = canvas.toDataURL("image/jpeg");  
}});
8
Sergey L

https://stackoverflow.com/a/23928038/1815624

css background-color：#ffffffをテーブルに追加するだけです:)

お役に立てれば

コンテンツを目的のページごとにdivにラップし、class="pdfpage"を指定してから、cssをpdfpage{background:#FFFFFF;}に設定しました。

コメントしたように、レンダリングされた要素の背景はすでに白だったので、白に設定する必要があると最初に考えたわけではありませんでした...しかし、実際には無色でした...

6
CrandellWS

今はもっと簡単だと思います（30/05/18）-html2canvasオプションでbackgroundColor：nullを渡すだけです：

html2canvas(
    document.querySelector("#some-id-to-export"),
    {backgroundColor: null}
).then(canvas => {$("#id-to-render-transparent-bg-img").html(canvas);});
5
Oleksandr Khryplyvenko
var body = document.getElementById("body")
$(body).html2canvas({onrendered: function( canvas ) {  
     var urlData = canvas.toDataURL("image/jpeg");  
},
background: '#fff'});

2年後ですが、更新されたバージョンはこのようなパラメータを受け入れるはずです。 。 。

1
Tom Woodward

心配ありません。背景を追加するだけです： '＃FFFFFF'、正常に動作しています

                   html2canvas(element, {
                       background: '#FFFFFF',
                       onrendered: function (canvas) {
                           $("#previewImage").append(canvas);
                           getCanvas = canvas;
                       }
                   });
0
B.Nishan

実際の画像データを不透明にする必要がある場合は、fillRect（0、0、width、height）をfillStyle'white 'とともに使用します。

それを行う別の方法ですが、それは非常に遅いです（おそらく数ミリ秒）、getImageDataとputImageDataを使用し、各ピクセルを繰り返しスローしてrgba値をチェックし、それらを変更することです

0
Rivenfall

html2Canvasチームとngxchartsチームは、解決策を提供せずにこの問題のバグを閉じたようです。 cssクラスを介してrectのfillプロパティを設定することは機能しませんでした。

これは私がそれを解決することになった方法です、驚くべきことにそれは機能します：

 let rectElements = Array.from(document.getElementsByTagName('rect'));
  if (rectElements.length > 0) {
    rectElements.forEach(rect => {
      rect.setAttribute('fill', '#ffffff');
    });
  }
0
s p