在转换后的操作后重新调整HTML Canvas大小 [英] Rezize HTML Canvas size after transformed operation
问题描述
我有一个网页，可让用户通过相机上传图片并对其进行绘制。所以我使用 html canvas 来实现免费绘图部分。问题在于某些图像上传方向错误，因此我必须为用户提供一个按钮，让他们使用画布旋转图像。
但是，在图像旋转后，我不知道如何调整画布的大小，使其具有与旋转图像相同的宽度和高度。现在，我有一些空白，我在循环后用我的代码中的蓝色背景标记。请在下面运行我的代码，以更好地了解我在这里要说的内容。
所以我的问题是如何在旋转后重新调整画布宽度和高度的大小，以便它与旋转的图像具有相同的宽度和高度？ b
$ b
您可以通过以下方式完成此操作： data-lang =jsdata-hide =falsedata-console =falsedata-babel =false>
var file，canvas，ctx，image，fileURL，imgWidth，imgHeight，rotation = 90，state = true; function fileUpload（files）{file = files [0]; fileURL = URL.createObjectURL（file）; canvas = document.getElementById（'myCanvas'）; canvas.style.backgroundColor =blue; ctx = canvas.getContext（'2d'）; image = new Image（）; image.onload = function（）{imgWidth = image.width; //图片宽度imgHeight = image.height; //图片高度canvas.width = imgWidth; //将画布宽度设置为图像宽度canvas.height = imgHeight; //将画布高度设置为图像高度ctx.drawImage（image，0，0）; } image.src = fileURL} function rotate（）{state =！state; //画布状态（方向）if（状态）{//如果状态为true canvas.width = imgWidth; canvas.height = imgHeight; } else {//如果state为false canvas.width = imgHeight; //将画布宽度设置为图像高度canvas.height = imgWidth; //设置画布高度为图像宽度} ctx.clearRect（0，0，canvas.width，canvas.height）; ctx.save（）; //保存画布状态ctx.translate（canvas.width / 2，canvas.height / 2）; ctx.rotate（rotation * Math.PI / 180）; if（state）ctx.translate（-canvas.width / 2，-canvas.height / 2）; //根据方向来翻译其他内容ctx.translate（-canvas.height / 2，-canvas.width / 2）; // ^^ ctx.drawImage（image，0，0）;旋转+ = 90; ctx.restore（）; //恢复画布状态}
< canvas id = myCanvas>< / canvas>< br />< input type =fileonchange =fileUpload（this.files）id =file-inputcapture =camera>< br />< br /><按钮onclick =rotate（）>旋转< / button>
p>
没有给出解释的道歉
I have a webpage that let users upload image via camera and make some drawing on it. So I use html canvas to achieve the free drawing part. The problem is that some images are uploaded with wrong orientation and I therefore have to provide users with a button that let them rotate the image using canvas.
However, after a rotation of image, I do not know how to resize the canvas so that it has the same width and height just as the rotated image. Right now, I have some "blank spaces" which I mark with blue background in my code below after rotation. Please run my code below to better understand what I am trying to say here.
So my question is how to re-resize the canvas width and height after rotation so that it has the same width and height as the rotated image?
<!DOCTYPE html>
<html>
<head>
<title>Portrait</title>
</head>
<body>
<canvas id="myCanvas"></canvas><br/>
<input type="file" onchange="fileUpload(this.files)" id="file-input" capture="camera"><br/><br/>
<button onclick="rotate()">Rotate</button>
<script>
var file, canvas, ctx, image, fileURL, rotation = 90;
function fileUpload(files) {
file = files[0]
fileURL = URL.createObjectURL(file)
canvas = document.getElementById('myCanvas')
canvas.style.backgroundColor = "blue"
ctx = canvas.getContext('2d')
image = new Image()
image.onload = function() {
canvas.width = 500
canvas.height = (500 * this.height) / this.width
ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
}
image.src = fileURL
}
function rotate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save(); //save canvas state
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(rotation * Math.PI / 180);
ctx.translate(-canvas.width / 2, -canvas.height / 2);
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
rotation += 90;
ctx.restore(); //restore canvas state
}
</script>
</body>
</html>
You can accomplish that in the following way ...
var file, canvas, ctx, image, fileURL, imgWidth, imgHeight, rotation = 90, state = true;
function fileUpload(files) {
file = files[0];
fileURL = URL.createObjectURL(file);
canvas = document.getElementById('myCanvas');
canvas.style.backgroundColor = "blue";
ctx = canvas.getContext('2d');
image = new Image();
image.onload = function() {
imgWidth = image.width; //image width
imgHeight = image.height; //image height
canvas.width = imgWidth; //set canvas width as image width
canvas.height = imgHeight; //set canvas height as image height
ctx.drawImage(image, 0, 0);
}
image.src = fileURL
}
function rotate() {
state = !state; //canvas state (orientation)
if (state) { //if state is true
canvas.width = imgWidth;
canvas.height = imgHeight;
} else { //if state is false
canvas.width = imgHeight; //set canvas width as image height
canvas.height = imgWidth; //set canvas height as image width
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save(); //save canvas state
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(rotation * Math.PI / 180);
if (state) ctx.translate(-canvas.width / 2, -canvas.height / 2); //translate depending on orientation
else ctx.translate(-canvas.height / 2, -canvas.width / 2); // ^^
ctx.drawImage(image, 0, 0);
rotation += 90;
ctx.restore(); //restore canvas state
}
<canvas id="myCanvas"></canvas>
<br/>
<input type="file" onchange="fileUpload(this.files)" id="file-input" capture="camera">
<br/>
<br/>
<button onclick="rotate()">Rotate</button>
apology for not giving explanation
这篇关于在转换后的操作后重新调整HTML Canvas大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
