Question

我尝试了互联网上的每一个例子，其中没有一个正在工作。我试图将完整的图像放入画布中，但它的质量非常差。我试过旋转（站立的照片需要铺设），我需要数据包回来。获取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

尝试选择一张图片，你会明白我的意思。我用Google搜索并检查了这里，但是所有的例子都让图片看起来很难看，或者让它们移动到奇怪的位置。

我只是想加载图片，旋转90度，这样就可以放置一张图片了。

获取dataurl，然后我的其他脚本将完成剩下的工作。

保持所有exif，它只需旋转90度就可以了。

我做错了什么

Answer 1

替换这些行：

$('#pic').css('height', imgheigt);
$('#pic').css('width', imgwidth)

有了这个：

canvas.height = imgheigt;
canvas.width = imgwidth;

实际上你正在为画布设置宽度和高度css样式，而你应该修改元素属性。

[编辑]以下是关于旋转90°的jsfiddle的完整解决方案：http://jsfiddle.net/Akaryatrh/r6u9c/

Answer 2

像这样进行轮换：

使画布与图像大小相同（如@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>

画布图像模糊且不完整

2 个答案: