HTML5 Rotation Image

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/

J’ai un problème pour faire pivoter une image de 90 ° vers la droite ou vers la gauche.

J’utilise une image sur la canvas, le même écran aura plusieurs canvass égales à celle de l’exemple, mais je l’ai laissé le plus près possible du projet.

Je demande, comment faire pivoter l’image de 90 ° vers la gauche ou vers la droite lorsque je clique sur “Rotate Left” et “Rotate Right”?

J’ai essayé plusieurs codes sur internet mais aucun n’a fonctionné.

Vous pouvez utiliser canvas ‘context.translate & context.rotate pour faire pivoter votre image

entrer la description de l'image ici

Voici une fonction pour dessiner une image qui est pivotée par les degrés spécifiés:

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

Voici le code et un violon: http://jsfiddle.net/m1erickson/6ZsCz/

           

L’autre solution fonctionne parfaitement pour les images carrées. Voici une solution qui fonctionnera pour une image de n’importe quelle dimension. Le canevas s’adaptera toujours à l’image plutôt qu’à l’autre solution, ce qui peut entraîner la coupe de parties de l’image.

 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/

Méthode de rotation d’image de contexte 2D la plus rapide

Une rotation d’image, une position et une échelle d’usage général.

 // 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); } 

Si vous souhaitez contrôler le sharepoint rotation, utilisez la fonction suivante

 // 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); } 

Pour réinitialiser la transformation du contexte 2D

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

Ainsi pour faire pivoter l’image vers la gauche (anti-horaire) 90 degrés

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

Ainsi pour faire pivoter l’image vers la droite (dans le sens des aiguilles d’une montre) 90 degrés

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

Exemple dessiner 500 images traduites à l’échelle

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

C’est le code le plus simple pour dessiner une image tournée et mise à l’échelle:

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

Voici quelque chose que j’ai fait

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

usage

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

HTML

  

Comme @markE mentionne dans sa réponse

l’alternative est de déstructurer et de détacher après avoir dessiné

C’est beaucoup plus rapide que la sauvegarde et la restauration du contexte.

Voici un exemple

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

Pourquoi ne pas le faire pour toute la page. Au chargement de la page, détecter toutes les images et les faire pivoter en continu.

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

S’il vous plaît vérifier pour theApp.start_Action où toute l’action commence Le HTML peut être comme suit:

  

Deepika Padukone.
deepika

Priyanka Chopra.
Priyanka

Some options to overlap rotations, borders are also added