Jquery 画布旋转功能创建空白图像
嗨,我正在使用画布和base64字符串调整和压缩图像 这是完整的代码Jquery 画布旋转功能创建空白图像,jquery,html5-canvas,image-manipulation,exif-js,Jquery,Html5 Canvas,Image Manipulation,Exif Js,嗨,我正在使用画布和base64字符串调整和压缩图像 这是完整的代码 function preview_image(event) { var fileReader = new FileReader(); fileReader.onload = function (event) { var image = new Image(); image.onload=function() { var canvas
function preview_image(event)
{
var fileReader = new FileReader();
fileReader.onload = function (event)
{
var image = new Image();
image.onload=function()
{
var canvas=document.createElement("canvas");
var context=canvas.getContext("2d");
canvas.width=600;
canvas.height=canvas.width*image.height/image.width; /*For Aspect ratio*/
context.rotate(90 * Math.PI/180); // rotate by 90 degrees
context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);
var jpgurl=canvas.toDataURL('image/jpeg', 0.5);
}
};
}
我想将图像旋转到90度,但在使用jpgurl创建图像后,输出图像仍然没有旋转,并且为空旋转后的图像在屏幕外。如果要围绕图像中心旋转图像,请尝试以下操作:
function preview_image(event)
{
var fileReader = new FileReader();
fileReader.onload = function (event)
{
var image = new Image();
image.onload=function()
{
var canvas=document.createElement("canvas");
var context=canvas.getContext("2d");
canvas.width=600;
canvas.height=canvas.width*image.height/image.width; /*For Aspect ratio*/
// First move the origin (0,0) to the middle of the canvas
context.translate(canvas.width/2, canvas.height/2)
context.rotate(90 * Math.PI/180); // rotate by 90 degrees
// And also draw the Image centered on the origin
context.drawImage(image, -image.width/2, -image.height/2, image.width/2, image.height/2, 0, 0, canvas.width, canvas.height);
var jpgurl=canvas.toDataURL('image/jpeg', 0.5);
}
};
}
有两个变化:
1) 在旋转画布之前平移原点
context.translate(canvas.width/2, canvas.height/2)
2) 绘制中心位于原点顶部的图像
context.drawImage(image, -image.width/2, -image.height/2,
image.width/2, image.height/2, 0, 0, canvas.width, canvas.height);
请记住,画布将保持旋转,其原点将位于其中心。如果您想返回,可以将
上下文.save()
放在translate
之前,将上下文.restore()
放在drawImage
之后。结果是相同的空白图像,没有旋转。这解决了吗?如果可能的话,分享答案。。。