Question

我有一张exif方向为6的图像！我在画布上缩放图像（减少比例）像这样：

var width = $('#thumbnail').css('width')
    var heigth = $('#thumbnail').css('height')
    console.log(width);
    console.log(heigth);
    $('#thumbnail').css('height', width).css('width', heigth);
    ctx.clearRect(0,0,c.width,c.height);
    ctx.save();
    ctx.translate(0, c.width/2, c.height/2);
    ctx.rotate(90 * Math.PI/180);
    ctx.translate(c.width/2, c.height/2);

    ctx.drawImage(img,-img.width/2, -img.height/2);

    ctx.restore();

画布大小是按比例缩小的图像大小。但结果并未预料到。图片缩放到200％（放大）。

如果在js中没有解决方案，请解释我如何将exif添加到画布。

谢谢！

Answer 1

我尽力了解你的问题黑暗，所以这是我尝试回答

jsFiddle：https://jsfiddle.net/20w7u4qc/

的javascript

ctx.clearRect(0, 0, c.width, c.height);
ctx.save();
ctx.translate(c.width / 2, c.height / 2);
ctx.rotate(90 * Math.PI / 180);
ctx.translate(-c.width / 2, -c.height / 2);
ctx.drawImage(img, 0, 0);
ctx.restore();

如果错误或您更新问题可以理解，请告诉我：）

Javascript画布旋转图像

1 个答案: