Javascript画布旋转图像 [英] Javascript canvas rotate image

问题描述

我在6点有一个exif方向的图像！我在画布中缩放图像（以比例缩小）
像这样：

  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添加到canvas。

谢谢！

解决方案

我尽力了解你的问题，我试图回答

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（）; 
  

让我知道它是错误的还是更新您的问题是可以理解的：）

I have a image with exif orientation at 6! I'm scaling the image in canvas (to reduce with proportion) like this:

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();

The canvas size is the image size reduce by ratio. But the result is not expected. The picture is scaled to 200% (zoom-in).

If have no solution in js, explain me how I can add exif to canvas.

Thanks!

解决方案

I have tried my best to understand your question darkiron so here is my attempt at answering

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();

Let me know if it is wrong or if you update your question to be understandable :)

这篇关于Javascript画布旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！