Javascript画布旋转图像答案

【问题标题】：Javascript canvas rotate imageJavascript画布旋转图像
【发布时间】：2015-12-15 20:43:22
【问题描述】：

我有一张 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添加到画布。

谢谢！

【问题讨论】：

标签： javascript html canvas

【解决方案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();

让我知道它是否有误，或者您是否将问题更新为可以理解的:)

【讨论】：