gpt4 book ai didi

javascript - Canvas 图像模糊且不完整

转载 作者:行者123 更新时间:2023-12-02 17:58:31 26 4
gpt4 key购买 nike

我尝试了互联网上的每个示例,但没有一个有效。我尝试将完整图像放入 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com