我尝试了互联网上的每个示例，但没有一个有效。 我尝试将完整图像放入 Canvas 中，但放大后的质量非常差。
我尝试旋转(站立的图片需要放置)，我需要返回dataurl。
获取 dataurl 不是问题。
问题是它不起作用。
<script>
function readFile(file, callback){
var reader = new FileReader();
reader.onload = callback
reader.readAsDataURL(file);
result = reader.readAsDataURL(file);
console.log(result);
}
function snapitgetFile(){
snapitloadshit();
}
function snapitloadshit(){
$('#snapitUpload').on('change', function(e){
var filesize = this.files[0].size;
var filename = this.files[0].name;
var extension = filename.substring(filename.lastIndexOf('.')+1);
var filePath = $(this).val();
readFile(this.files[0], function(e) {
//console.log(e.target.result);
var canvas = document.getElementById("pic");
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
var imgwidth = this.width;
var imgheigt = this.height;
$('#pic').css('height', imgheigt);
$('#pic').css('width', imgwidth);
ctx.drawImage(image, 0,0);
};
image.src = e.target.result;
});
});
}
</script>
演示:http://www.aeglobalresearch.com/demo/rotate.html
尝试选择一张图片，您就会明白我的意思。 我用谷歌搜索并检查了这里，但所有示例都使图片看起来丑陋或将它们移动到奇怪的位置。
我只是想加载图片，旋转 90 度，这样一张站立的图片就是躺着的。
获取 dataurl，然后我的脚本的其余部分将完成剩下的工作。
保留所有exif，只需向右旋转90度即可。
我做错了什么
最佳答案
像这样进行旋转:
- 使 Canvas 与图像大小相同(如 @Akaryatrh 所说)，
- 平移到图像的中心，
- 旋转 90 度 (==90*Math.PI/180)
- 绘制偏移 -img.width/2 和 -img.height/2 的图像
演示:http://jsfiddle.net/m1erickson/NZZ3s/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();img.onload=start;img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/2014.png";
function start(){
canvas.width=img.width;
canvas.height=img.height;
ctx.translate(img.width/2,img.height/2);
ctx.rotate(90 * Math.PI/180);
ctx.drawImage(img,-img.width/2,-img.height/2);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
关于javascript - Canvas 图像模糊且不完整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20777045/