问题描述
我在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:
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画布旋转图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!