Recadrer une image affichée dans un canevas

J’ai une étiquette de canvas:

 

Je souhaite append une fonctionnalité de recadrage. J’ai donc créé une div redimensionnable qui permet d’identifier les bordures d’une image recadrée en faisant glisser les coins de la div à l’aide de la souris. Cela ressemble à l’image ci-dessous:

entrez la description de l'image ici

entrez la description de l'image ici

J’utilise actuellement “toDataURL ()” pour convertir les données du canvass en une image pouvant être affichée par une . Ma question est la suivante: comment convertir en image seulement une partie de la canvas identifiée par la div redimensionnable?

Utilisez la méthode getImageData avec les coordonnées du rectangle sélectionné. Par exemple:

 var imageData = ctx.getImageData(65, 60, 100, 100); 

Créez ensuite un canevas secondaire aux tailles souhaitées et utilisez puImageData pour définir les pixels:

 var canvas1 = document.createElement("canvas"); canvas1.width = 100; canvas1.height = 100; var ctx1 = canvas1.getContext("2d"); ctx1.rect(0, 0, 100, 100); ctx1.fillStyle = 'white'; ctx1.fill(); ctx1.putImageData(imageData, 0, 0); 

Enfin, utilisez toDataURL pour mettre à jour l’image:

 dstImg.src = canvas1.toDataURL("image/png"); 

Voir l’échantillon complet que j’ai préparé pour vous dans CodePen

Créez un nouveau canevas à la taille de destination, tracez l’image recadrée à l’aide de drawImage () et insérez ce canevas dans le DOM en évitant d’utiliser img et data-uri:

 var ccanvas = document.createElement("canvas"), cctx = ccanvas.getContext("2d"); ccanvas.width = w; ccanvas.height = h; // draw with crop arguments cctx.drawImage(image_src, x, y, w, h, 0, 0, w, h); // ^^^^^^^^^^ source region // ^^^^^^^^^^ dest. region // insert cropped image somewhere in the DOM tree: document.body.appendChild(ccanvas); 
 window.onload = function() { var img = document.getElementById("image_src"); document.body.appendChild(region2canvas(img, 150, 60, 220, 200)); } function region2canvas(img, x, y, w, h) { var ccanvas = document.createElement("canvas"), cctx = ccanvas.getContext("2d"); ccanvas.width = w; ccanvas.height = h; // draw with crop arguments cctx.drawImage(img, x, y, w, h, 0, 0, w, h); return ccanvas; } 
  

Créez un nouveau canevas et copiez la partie sélectionnée dans ce nouveau canevas, puis récupérez toDataURL () à partir de ce nouveau canevas.

Pour recadrer une image, la clé réside dans le fait que la méthode drawImage du contexte nous permet de restituer une section recadrée de l’image source dans la zone de dessin.

 context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh); 

imgObjet image source
sxSource x
sySource y
swlargeur de la source
shHauteur de la source
dxDestination x
dyDestination y
dwLargeur de destination
dhHauteur de la destination