Поворот изображения canvasа HTML5

jQuery('#carregar').click(function(){ var canvas = document.getElementById('canvas'); var image = document.getElementById('image'); var element = canvas.getContext("2d"); element.clearRect(0, 0, canvas.width, canvas.height); element.drawImage(image, 0, 0, 300, 300); }); 

jsfiddle.net/braziel/nWyDE/

У меня есть проблема повернуть изображение на 90 ° вправо или влево.

Я использую изображение на canvasе, на том же экране будет несколько canvasов, равных изображению на примере, но я оставил его как можно ближе к проекту.

Я спрашиваю, как поворачивать изображение на 90 ° влево или вправо, когда я нажимаю «Повернуть влево» и «Повернуть вправо»?

Я пробовал несколько кодов в Интернете, но никто не работал.

Вы можете использовать canvas ‘context.translate & context.rotate, чтобы повернуть изображение

введите описание изображения здесь

Вот функция рисования изображения, которое поворачивается на указанные gradleусы:

 function drawRotated(degrees){ context.clearRect(0,0,canvas.width,canvas.height); // save the unrotated context of the canvas so we can restore it later // the alternative is to untranslate & unrotate after drawing context.save(); // move to the center of the canvas context.translate(canvas.width/2,canvas.height/2); // rotate the canvas to the specified degrees context.rotate(degrees*Math.PI/180); // draw the image // since the context is rotated, the image will be rotated also context.drawImage(image,-image.width/2,-image.width/2); // we're done with the rotating so restore the unrotated context context.restore(); } в function drawRotated(degrees){ context.clearRect(0,0,canvas.width,canvas.height); // save the unrotated context of the canvas so we can restore it later // the alternative is to untranslate & unrotate after drawing context.save(); // move to the center of the canvas context.translate(canvas.width/2,canvas.height/2); // rotate the canvas to the specified degrees context.rotate(degrees*Math.PI/180); // draw the image // since the context is rotated, the image will be rotated also context.drawImage(image,-image.width/2,-image.width/2); // we're done with the rotating so restore the unrotated context context.restore(); } 

Вот код и скрипт: http://jsfiddle.net/m1erickson/6ZsCz/

           
по
в

Другое решение отлично подходит для квадратных изображений. Вот решение, которое будет работать для изображения любого измерения. Полотно всегда будет соответствовать изображению, а не другому решению, которое может привести к обрезанию fragmentов изображения.

 var canvas; var angleInDegrees=0; var image=document.createElement("img"); image.onload=function(){ drawRotated(0); } image.src="http://greekgear.files.wordpress.com/2011/07/bob-barker.jpg"; $("#clockwise").click(function(){ angleInDegrees+=90 % 360; drawRotated(angleInDegrees); }); $("#counterclockwise").click(function(){ if(angleInDegrees == 0) angleInDegrees = 270; else angleInDegrees-=90 % 360; drawRotated(angleInDegrees); }); function drawRotated(degrees){ if(canvas) document.body.removeChild(canvas); canvas = document.createElement("canvas"); var ctx=canvas.getContext("2d"); canvas.style.width="20%"; if(degrees == 90 || degrees == 270) { canvas.width = image.height; canvas.height = image.width; } else { canvas.width = image.width; canvas.height = image.height; } ctx.clearRect(0,0,canvas.width,canvas.height); if(degrees == 90 || degrees == 270) { ctx.translate(image.height/2,image.width/2); } else { ctx.translate(image.width/2,image.height/2); } ctx.rotate(degrees*Math.PI/180); ctx.drawImage(image,-image.width/2,-image.height/2); document.body.appendChild(canvas); } по var canvas; var angleInDegrees=0; var image=document.createElement("img"); image.onload=function(){ drawRotated(0); } image.src="http://greekgear.files.wordpress.com/2011/07/bob-barker.jpg"; $("#clockwise").click(function(){ angleInDegrees+=90 % 360; drawRotated(angleInDegrees); }); $("#counterclockwise").click(function(){ if(angleInDegrees == 0) angleInDegrees = 270; else angleInDegrees-=90 % 360; drawRotated(angleInDegrees); }); function drawRotated(degrees){ if(canvas) document.body.removeChild(canvas); canvas = document.createElement("canvas"); var ctx=canvas.getContext("2d"); canvas.style.width="20%"; if(degrees == 90 || degrees == 270) { canvas.width = image.height; canvas.height = image.width; } else { canvas.width = image.width; canvas.height = image.height; } ctx.clearRect(0,0,canvas.width,canvas.height); if(degrees == 90 || degrees == 270) { ctx.translate(image.height/2,image.width/2); } else { ctx.translate(image.width/2,image.height/2); } ctx.rotate(degrees*Math.PI/180); ctx.drawImage(image,-image.width/2,-image.height/2); document.body.appendChild(canvas); } в var canvas; var angleInDegrees=0; var image=document.createElement("img"); image.onload=function(){ drawRotated(0); } image.src="http://greekgear.files.wordpress.com/2011/07/bob-barker.jpg"; $("#clockwise").click(function(){ angleInDegrees+=90 % 360; drawRotated(angleInDegrees); }); $("#counterclockwise").click(function(){ if(angleInDegrees == 0) angleInDegrees = 270; else angleInDegrees-=90 % 360; drawRotated(angleInDegrees); }); function drawRotated(degrees){ if(canvas) document.body.removeChild(canvas); canvas = document.createElement("canvas"); var ctx=canvas.getContext("2d"); canvas.style.width="20%"; if(degrees == 90 || degrees == 270) { canvas.width = image.height; canvas.height = image.width; } else { canvas.width = image.width; canvas.height = image.height; } ctx.clearRect(0,0,canvas.width,canvas.height); if(degrees == 90 || degrees == 270) { ctx.translate(image.height/2,image.width/2); } else { ctx.translate(image.width/2,image.height/2); } ctx.rotate(degrees*Math.PI/180); ctx.drawImage(image,-image.width/2,-image.height/2); document.body.appendChild(canvas); } 

http://jsfiddle.net/6ZsCz/1588/

Самый быстрый метод поворота 2D-контекста

Вращение, положение и масштаб изображения общего назначения.

 // no need to use save and restore between calls as it sets the transform rather // than multiply it like ctx.rotate ctx.translate ctx.scale and ctx.transform // Also combining the scale and origin into the one call makes it quicker // x,y position of image center // scale scale of image // rotation in radians. function drawImage(image, x, y, scale, rotation){ ctx.setTransform(scale, 0, 0, scale, x, y); // sets scale and origin ctx.rotate(rotation); ctx.drawImage(image, -image.width / 2, -image.height / 2); } 

Если вы хотите контролировать точку поворота, используйте следующую функцию

 // same as above but cx and cy are the location of the point of rotation // in image pixel coordinates function drawImageCenter(image, x, y, cx, cy, scale, rotation){ ctx.setTransform(scale, 0, 0, scale, x, y); // sets scale and origin ctx.rotate(rotation); ctx.drawImage(image, -cx, -cy); } 

Чтобы сбросить преобразование 2D-контекста

 ctx.setTransform(1,0,0,1,0,0); // which is much quicker than save and restore 

Таким образом, чтобы повернуть изображение влево (против часовой стрелки) на 90 gradle

 drawImage(image, canvas.width / 2, canvas.height / 2, 1, - Math.PI / 2); 

Таким образом, для поворота изображения вправо (по часовой стрелке) 90 gradle

 drawImage(image, canvas.width / 2, canvas.height / 2, 1, Math.PI / 2); 

Пример рисования 500 изображений, переворачиваемых с масштабированием

 var image = new Image; image.src = "https://i.stack.imgur.com/C7qq2.png?s=328&g=1"; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.style.position = "absolute"; canvas.style.top = "0px"; canvas.style.left = "0px"; document.body.appendChild(canvas); var w,h; function resize(){ w = canvas.width = innerWidth; h = canvas.height = innerHeight;} resize(); window.addEventListener("resize",resize); function rand(min,max){return Math.random() * (max ?(max-min) : min) + (max ? min : 0) } function DO(count,callback){ while (count--) { callback(count) } } const sprites = []; DO(500,()=>{ sprites.push({ x : rand(w), y : rand(h), xr : 0, yr : 0, // actual position of sprite r : rand(Math.PI * 2), scale : rand(0.1,0.25), dx : rand(-2,2), dy : rand(-2,2), dr : rand(-0.2,0.2), }); }); function drawImage(image, spr){ ctx.setTransform(spr.scale, 0, 0, spr.scale, spr.xr, spr.yr); // sets scales and origin ctx.rotate(spr.r); ctx.drawImage(image, -image.width / 2, -image.height / 2); } function update(){ var ihM,iwM; ctx.setTransform(1,0,0,1,0,0); ctx.clearRect(0,0,w,h); if(image.complete){ var iw = image.width; var ih = image.height; for(var i = 0; i < sprites.length; i ++){ var spr = sprites[i]; spr.x += spr.dx; spr.y += spr.dy; spr.r += spr.dr; iwM = iw * spr.scale * 2 + w; ihM = ih * spr.scale * 2 + h; spr.xr = ((spr.x % iwM) + iwM) % iwM - iw * spr.scale; spr.yr = ((spr.y % ihM) + ihM) % ihM - ih * spr.scale; drawImage(image,spr); } } requestAnimationFrame(update); } requestAnimationFrame(update); 

Это самый простой код для рисования развернутого и масштабированного изображения:

 function drawImage(ctx, image, x, y, w, h, degrees){ ctx.save(); ctx.translate(x+w/2, y+h/2); ctx.rotate(degrees*Math.PI/180.0); ctx.translate(-xw/2, -yh/2); ctx.drawImage(image, x, y, w, h); ctx.restore(); } в function drawImage(ctx, image, x, y, w, h, degrees){ ctx.save(); ctx.translate(x+w/2, y+h/2); ctx.rotate(degrees*Math.PI/180.0); ctx.translate(-xw/2, -yh/2); ctx.drawImage(image, x, y, w, h); ctx.restore(); } 

Вот что я сделал

 var ImgRotator = { angle:parseInt(45), image:{}, src:"", canvasID:"", intervalMS:parseInt(500), jump:parseInt(5), start_action:function(canvasID, imgSrc, interval, jumgAngle){ ImgRotator.jump = jumgAngle; ImgRotator.intervalMS = interval; ImgRotator.canvasID = canvasID; ImgRotator.src = imgSrc ; var image = new Image(); var canvas = document.getElementById(ImgRotator.canvasID); image.onload = function() { ImgRotator.image = image; canvas.height = canvas.width = Math.sqrt( image.width* image.width+image.height*image.height); window.setInterval(ImgRotator.keepRotating,ImgRotator.intervalMS); //theApp.keepRotating(); }; image.src = ImgRotator.src; }, keepRotating:function(){ ImgRotator.angle+=ImgRotator.jump; var canvas = document.getElementById(ImgRotator.canvasID); var ctx = canvas.getContext("2d"); ctx.save(); ctx.clearRect(0,0,canvas.width,canvas.height); ctx.translate(canvas.width/2,canvas.height/2); ctx.rotate(ImgRotator.angle*Math.PI/180); ctx.drawImage(ImgRotator.image, -ImgRotator.image.width/2,-ImgRotator.image.height/2); ctx.restore(); } } 

Применение

 ImgRotator.start_action("canva", "data:image/jpeg;base64,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", 500,15 ); 

HTML

  

Как упоминает @markE в своем ответе

альтернативой является нетранслировать и отключать после рисования

Это намного быстрее, чем сохранение и восстановление контекста.

Вот пример

 // translate and rotate this.context.translate(x,y); this.context.rotate(radians); this.context.translate(-x,-y); this.context.drawImage(...); // untranslate and unrotate this.context.translate(x, y); this.context.rotate(-radians); this.context.translate(-x,-y); 

Почему бы не сделать это для всей страницы. При загрузке страницы обнаруживают все изображения и непрерывно поворачивают их все.

  var RotationCollection = { rotators: [], start_action: function (showBorders, isoverlap) { try { var canvasTemplate = ''; var ja = 5; $.each($("img"), function (index, val) { var newID = "can_" + index; var can = canvasTemplate.replace("_ID_", newID); if (showBorders == true) $(can).insertAfter($(val)).css({ "border": "solid thin black", "box-shadow": "5px 5px 10px 2px black", "border-raduis": "15px" }); else $(can).insertAfter($(val)); $(val).remove(); var curRot = new RotationClass(newID, $(val).attr('src'), ja * ((0 == index % 2) ? -1 : 1), isoverlap); RotationCollection.rotators[index] = curRot; ja += 5; //return false; }); window.setInterval(function () { $.each(RotationCollection.rotators, function (index, value) { value.drawRotatedImage(); }) }, 500); } catch (err) { console.log(err.message); } } }; function RotationClass(canvasID, imgSrc, jumgAngle, overlap) { var self = this; self.overlap = overlap; self.angle = parseInt(45); self.image = {}; self.src = imgSrc; self.canvasID = canvasID; self.jump = parseInt(jumgAngle); self.start_action = function () { var image = new Image(); var canvas = document.getElementById(self.canvasID); image.onload = function () { self.image = image; canvas.height = canvas.width = Math.sqrt(image.width * image.width + image.height * image.height); self.drawRotatedImage(self); }; image.src = self.src; } self.start_action(); this.drawRotatedImage = function () { var self = this; self.angle += self.jump; var canvas = document.getElementById(self.canvasID); var ctx = canvas.getContext("2d"); ctx.save(); if (self.overlap) ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(self.angle * Math.PI / 180); ctx.drawImage(self.image, -self.image.width / 2, -self.image.height / 2); ctx.restore(); } } var theApp = { start_Action: function () { RotationCollection.start_action(true, true); } }; $(document).ready(theApp.start_Action); 

Зайдите в theApp.start_Action, где начинается все действие. HTML может быть следующим:

  

Deepika Padukone.
deepika

Priyanka Chopra.
Priyanka

Some options to overlap rotations, borders are also added

  • java swing background image
  • Android, перемещение растрового изображения по пути?
  • Как повернуть изображение в WinForms
  • android: выберите изображение из галереи, затем обрезайте его и покажите в изображении
  • Отображение динамического изображения из базы данных с помощью p: graphicImage и StreamedContent
  • Преобразование изображения в оттенки серого в HTML / CSS
  • Объединение двух изображений в C # /. NET
  • Android: как сделать кликабельное изображение карты с каждой страной, производя другое действие?
  • Зачем «шагать» в конструкторе System.Drawing.Bitmap быть кратным 4?
  • Как получить правильную ориентацию изображения, выбранного из галереи изображений по умолчанию
  • img src SVG изменение цвета заливки
  • Давайте будем гением компьютера.