首先，使用以下代码上传一张宽度大于高度的小图像。
//<![CDATA[
/* js/external.js */
var doc, M, I;
addEventListener('load', function(){
doc = document;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
var canvas = I('canvas'), ctx;
I('upload').onchange = function(){
var files = this.files, file, fr, img;
if(files.length){
file = files[0]; fr = new FileReader; img = M('img');
fr.onload = function(){
img.onload = function(){
canvas.width = this.width; canvas.height = this.height;
ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
}
img.src = this.result;
}
fr.readAsDataURL(file);
}
}
});
//]]>/* css/external.css */
*{
float:left; clear:left;
}
#canvas{
margin-top:10px;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>canvas rotate</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<input id='upload' type='file' accept='image/*' />
<canvas id='canvas' width='0' height='0'></canvas>
</body>
</html>您可以看到图像在 Canvas 中正确显示。但这不是我的问题。我真的想同时旋转整个 Canvas 尺寸以及 Canvas 内容。如果它是一个正方形，那就没问题了，因为我可以取一半的高度和宽度，例如: ctx.save(); cxt.translate(halfImageWidth, halfImageHeight); ctx.rotate(Math.PI*90/180); ctx.translate(-halfImageWidth, -halfImageHeight); ctx.drawImage(imageContext, 0, 0, imageWidth, imageHeight); .
以下是我认为可行但行不通的方法:
//<![CDATA[
/* js/external.js */
var doc, M, I;
addEventListener('load', function(){
doc = document;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
var canvas = I('canvas'), ctx;
I('upload').onchange = function(){
var files = this.files, file, fr, img;
if(files.length){
file = files[0]; fr = new FileReader; img = M('img');
fr.onload = function(){
img.onload = function(){
canvas.width = this.height; canvas.height = this.width;
ctx = canvas.getContext('2d'); ctx.save(); ctx.rotate(Math.PI*90/180);
ctx.translate(-canvas.width, 0); ctx.drawImage(this, 0, 0, canvas.width, canvas.height); ctx.restore();
}
img.src = this.result;
}
fr.readAsDataURL(file);
}
}
});
//]]>/* css/external.css */
*{
float:left; clear:left;
}
#canvas{
margin-top:10px;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>canvas rotate</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<input id='upload' type='file' accept='image/*' />
<canvas id='canvas' width='0' height='0'></canvas>
</body>
</html>我认为通过在旋转之前不进行平移，我的原点是左上角，所以我应该能够在旋转后设置负原点，但这不起作用。如果有人可以展示并解释如何正确执行此操作，我将不胜感激。
附注
我已经考虑过 CSS 旋转，但由于我确实在使用数据，这对我来说不是一个解决方案。
最佳答案
如果如你所说，只需要旋转90度，那就很简单了。
图像的宽度将成为 Canvas 的高度，图像的高度将成为 Canvas 的宽度。
从那里你只需应用通常的方法即可
translate(target-center-x, target-center-y)
rotate(angle)
drawImage(img, -transform-origin, -transform-origin)
fileinput.onchange = e => {
const img = new Image();
img.onload = e => draw(img);
img.src = URL.createObjectURL(fileinput.files[0]);
};
function draw(img) {
const ctx = canvas.getContext('2d');
canvas.width = img.height;
canvas.height = img.width;
// move to center of the canvas
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 2);
// set the transform origin at center of the image
ctx.drawImage(img, -img.width / 2, -img.height / 2);
}<input type="file" id="fileinput">
<canvas id="canvas"></canvas>关于javascript - 如何同时旋转整个 Canvas 和绘制到 Canvas 中的图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55606825/