我正在尝试调整大小<canvas>已经绘制了图像，但我误解了如何使用canvas.scale()方法，因为它不会收缩......
Code:
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);
};
我在忽略什么？
Thanks!
您可以在调整原始画布大小时，通过将内容从临时画布上“弹起”来缩放画布。此保存+重绘过程是必要的，因为当您调整画布宽度或高度时，画布内容会自动清除。
示例代码：
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'>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
