BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み] .scale()でHTMLキャンバスをリサイズする

2022-03-04 06:33:50

質問

のサイズを変更しようとしています。 <canvas> の使い方を勘違いしています。 canvas.scale() メソッドでは縮小しないので...。

コードです。 

ImageRender.prototype.resizeTo = function () {

    var canvas          = $('#myCanvas')[0];
    var ctx             = canvas.getContext("2d");

    //current image
    var currImg         = ctx.getImageData(0, 0, canvas.width, canvas.height);

    //
    var tempCanvas      = $('canvas')[0];
    var tempCtx         = tempCanvas.getContext("2d");
    tempCtx.putImageData(currImg, 0, 0)

    //
    ctx.scale(0.5, 0.5);

    //redraw
    ctx.drawImage(tempCanvas, 0, 0);
  };

私は何を見落としているのだろう？

ありがとうございます。

解決方法は？

元のキャンバスのサイズを変更する間に、一時的なキャンバスからコンテンツをバウンスすることで、コンテンツを含むキャンバスを拡大縮小することができます。キャンバスの幅や高さを変更すると、キャンバスのコンテンツは自動的に消去されるため、この保存と再描画のプロセスは必要です。

コード例です。 

var myCanvas=document.getElementById("canvas");
var ctx=myCanvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var tempCanvas=document.createElement("canvas");
var tctx=tempCanvas.getContext("2d");

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/Dog-With-Cute-Cat.jpg";
function start(){
  myCanvas.width=img.width;
  myCanvas.height=img.height;
  ctx.drawImage(img,0,0);
  resizeTo(myCanvas,0.50);
}

function resizeTo(canvas,pct){
  var cw=canvas.width;
  var ch=canvas.height;
  tempCanvas.width=cw;
  tempCanvas.height=ch;
  tctx.drawImage(canvas,0,0);
  canvas.width*=pct;
  canvas.height*=pct;
  var ctx=canvas.getContext('2d');
  ctx.drawImage(tempCanvas,0,0,cw,ch,0,0,cw*pct,ch*pct);
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<h4>Canvas resized to 50%</h4>
<canvas id="canvas" width=300 height=300></canvas>
<h4>Img with original image</h4>
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/Dog-With-Cute-Cat.jpg'>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します