javascript - Html2Canvas のサイズ変更

Question

Webページのスクリーンショットを取得してサムネイルとしてレンダリングするためにhtml2canvasを使用しています（正確にはサムネイルではなく、400x300です）。

Screenshot console codeに基づいて、サムネイル部分を除いてすべてがうまく機能します。

画像サイズを 400x300 に設定するにはどうすればよいですか? firebug では、属性を次のように見つけます<canvas style="width: 973px; height: 2184px;" width="973" height="2184"></canvas>。ただし、コード (以下) または html2canvas.js で 400x300 パラメーターをハードコーディングする場所がわかりません。

スクリーンショット.html:

<html>
<head> 
<title>Screenshot</title> 
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]--> 
</head> 
<body> 
<div class=container> </div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<script type="text/javascript" src="js/html2canvas.js"></script> 
<script type="text/javascript">
var date=new Date();
var message,timeoutTimer,timer;
var proxyUrl="http://html2canvas.appspot.com";
function addRow(a,c,d){var b=$("<tr />").appendTo($(a));b.append($("<td />").css("font-weight","bold").text(c)).append($("<td />").text(d))}function throwMessage(b,a){window.clearTimeout(timeoutTimer);timeoutTimer=window.setTimeout(function(){message.fadeOut(function(){message.remove()})},a||2000);$(message).remove();message=$("<div />").html(b).css({margin:0,padding:10,background:"#000",opacity:0.7,position:"fixed",top:10,right:10,fontFamily:"Tahoma",color:"#fff",fontSize:12,borderRadius:12,width:"auto",height:"auto",textAlign:"center",textDecoration:"none"}).hide().fadeIn().appendTo("body")}$(function(){$("#recommended a").click(function(c){c.preventDefault();$("#url").val(this.href);$("button").click()});var a,b;$('input[type="button"]').click(function(){$(a.contentWindow).unbind("load");$(a).contents().find("body").html2canvas({canvasHeight:b.body.scrollHeight,canvasWidth:b.body.scrollWidth,logging:true})});$("#getscreenshot").click(function(d){d.preventDefault();$(this).prop("disabled",true);var c=$("#url").val();$("#content").append($("<img />").attr("src","loading.gif").css("margin-top",40));var f=document.createElement("a");f.href=c;$.ajax({data:{xhr2:false,url:f.href},url:proxyUrl,dataType:"jsonp",success:function(e){a=document.createElement("iframe");$(a).css({visibility:"hidden"}).width($(window).width()/2).height($(window).height()/2);$("#content").append(a);b=a.contentWindow.document;b.open();$(a.contentWindow).load(function(){var g=$(a).contents().find("body"),h={onrendered:function(j){$("#content").empty().append(j);$("#getscreenshot").prop("disabled",false);$("base").attr("href","")},allowTaint:true,taintTest:false,flashcanvas:"src/flashcanvas.min.js"},i=html2canvas(g,h)});$("base").attr("href",f.protocol+"//"+f.hostname+"/"+f.pathname);e=e.replace("<head>","<head><base href='"+f.protocol+"//"+f.hostname+"/"+f.pathname+"'  />");if($("#disablejs").prop("checked")){e=e.replace(/\<script/gi,"<!--<script");e=e.replace(/\<\/script\>/gi,"<\/script>-->")}b.write(e);b.close()}})})});
</script> 

<form class="well form-search"> 
<label for=url>Website URL:</label> 
<input type=url id=url value="http://www.yahoo.com" class="input-medium search-query"/>
<button class=btn id=getscreenshot>Get screenshot!</button> 
</form> 

 <div id=content></div> 

</body> 
</html>

score 21 · Accepted Answer

Mikkos のヒントに基づいて、次のことが私のために目覚めました

window.html2canvas([$('body')[0]], {
              onrendered: function(canvas) {
                var extra_canvas = document.createElement("canvas");
                extra_canvas.setAttribute('width',70);
                extra_canvas.setAttribute('height',70);
                var ctx = extra_canvas.getContext('2d');
                ctx.drawImage(canvas,0,0,canvas.width, canvas.height,0,0,70,70);
                var dataURL = extra_canvas.toDataURL();
                var img = $(document.createElement('img'));
                img.attr('src', dataURL);
                // insert the thumbnail at the top of the page
                $('body').prepend(img);
              },
            });

score 3 · Accepted Answer

サムネイルの寸法で追加の新しい<canvas>を作成し、 drawImage() を使用して、この新しいで縮小できます<canvas>。

<canvas>drawImage() はソースとして読み取ることができimage、ターゲットの幅と高さを設定できます。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

score 2 · Accepted Answer

これは私にとって素晴らしい作品です...

    html2canvas(document.getElementById("divTextOrig"), { allowTaint: true, 
    scrollX:0, scrollY: -window.scrollY}).then(function(canvas)
    {
        document.getElementById("divText1").appendChild(canvas);
        $('canvas').css("width",txtWidth);
        $('canvas').css("height",txtHeight);                    
    });

score 1 · Accepted Answer

私はあなたの問題に対して同様のアプローチを使用しましたが、一部は他の回答に基づいています:)実際の画像の場合、画像のサイズ変更は簡単なので、ここに私のコードがあります:

var img = new Image();
img.src = canvas.toDataURL("image/png");
img.width = 500;
document.getElementsByClassName('modal-body')[0].appendChild(img);

canvashtml2canvas 関数の出力です。次にimg、img データ (キャンバスの base64 エンコーディング) を使用してソースの設定を作成します。残りは標準の古き良きJavaScriptです。img幅を設定し、div要素に追加します...

score 0 · Accepted Answer

メソッドを使用してキャンバスコンテキストから参照を取得しgetContext('2d')、返されたコンテキストを変数 (例: ) に割り当てることで、 contextメソッドを使用してキャンバスコンテキストを目的のサイズにスケーリングctxできます。scaleさらに、スタイル属性を使用してキャンバスサイズを定義し、実際の画像サイズを目的のサムネイルサイズで分割することによって、スタイルwidthとプロパティのサイズを設定できます。height最後のステップで、結果の数値をctx.scale(width, height);メソッドに入れます。

score 0 · Accepted Answer

私にとっては予期せぬ方法でこの方法を見つけました（後でその理由がわかりました）。こののように、position 属性の後にいくつかの属性を追加するだけdoc.addImage(img, 'JPEG', 20, 20, 200, 250)で、最後の 2 つの数字で img のサイズを変更できます。

javascript - Html2Canvas のサイズ変更

6 に答える 6

Related

Reference