#jquery #html5-canvas #image-manipulation #exif-js
#jquery ( jquery ) #html5-холст #обработка изображений #exif-js
Вопрос:
Привет, я изменяю размер и сжимаю изображение, используя canvas и строку base64
вот полный код
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 выходное изображение по-прежнему не повернуто и остается пустым
Комментарии:
1. Это решаемая проблема? Поделитесь ответом, если это возможно…
Ответ №1:
Повернутое изображение находится за кадром. Если вы хотите повернуть изображение вокруг его центра, попробуйте следующее:
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);
Помните, что холст будет оставаться повернутым, а его начало координат будет находиться в его центре. Если вы хотите вернуться назад, вы можете поместить a context.save()
перед translate
и a context.restore()
после drawImage
Комментарии:
1. В результате получается то же пустое изображение без поворота