[英]Resize HTML canvas with .scale()
我正在尝试使用已绘制的图像调整<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'>
更简单的方法是使用drawImage()
的额外参数。 第4和第5个参数可让您设置最终的宽度和高度。
此外,您可以直接绘制图像(或画布),而无需获取ImageData。
另外(2),我想你也可能想要调整画布大小(只使用它的宽度和高度属性)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.