Javascript recadrer l'image sur le canevas

Je veux recadrer l'image en fonction d'une zone spécifique, ci-dessous, comment recadrer l'image afin qu'elle ne devienne que les choses (pixel, données …) dans la ligne bleue et supprimer les éléments (pixels, données …) hors de la boîte?

Le code ci-dessous est ce que j'ai essayé, après la toile de dessiner une nouvelle image, pas la zone correcte ce que je veux, est-ce que je manque quelque chose, comment le réparer?

N'hésitez pas à nous faire part de vos suggestions. Ne fournissez pas de plugin comme réponse, et cs crop n'est pas ce que je recherche.

METTRE À JOUR
Https://jsfiddle.net/xqpdtq76/ Je met à jour le violon et le code ci-dessous, l'image naturalWidth est différente avec css largeur, donc j'ai besoin de convertir la récolte x, y, width, height (sx, sy, sw, sh) Pour s'adapter à la taille d'image naturelle et recadrer l'image.
Le résultat semble fonctionner pour recadrer la zone correcte, mais l'image n'est pas une échelle correcte. Je ne comprends pas pourquoi

var crop = function() { var transformMediaBlock = $('.mediaBlock'); var transformCropInner = $('.transformCropInner'); var transformCropLimit = $('.transformCropLimit'); var canvasContainer = $('.canvasContainer') var canvasWidth = $(transformCropLimit).width(); var canvasHeight = $(transformCropLimit).height(); var canvas = $('<canvas/>',{'class':''}).width(canvasWidth).height(canvasHeight); canvas = canvas.appendTo($(canvasContainer)); var ctx = canvas[0].getContext('2d'); var limitLeft = transformCropLimit.offset().left; var limitTop = transformCropLimit.offset().top; var limitRight = limitLeft + transformCropLimit.width(); var limitBottom = limitTop + transformCropLimit.height(); console.log('limitLeft:'+limitLeft) console.log('limitRight:'+limitRight) var imageLeft = transformMediaBlock.find('img').offset().left; var imageTop = transformMediaBlock.find('img').offset().top; var imageRight = imageLeft + transformMediaBlock.find('img').width(); var imageBottom = imageTop + transformMediaBlock.find('img').height(); console.log('imageLeft:'+imageLeft) console.log('imageRight:'+imageRight) if (limitLeft <= imageLeft) { var sx = 0; } else { var sx = limitLeft - imageLeft; } console.log('sx:'+sx) if (limitTop <= imageTop) { var sy = 0; } else { var sy = limitTop - imageTop; } console.log('sy:'+sy) if (limitLeft <= imageLeft) { var l = imageLeft; } else { var l = limitLeft; } if (limitRight <= imageRight) { var r = limitRight; } else { var r = imageRight; } var sw = r - l; console.log('sw:'+sw) if (limitTop <= imageTop) { var t = imageTop; } else { var t = limitTop; } if (limitBottom <= imageBottom) { var b = limitBottom; } else { var b = imageBottom; } var sh = b - t; console.log('sh:'+sh); var dx = 0; var dy = 0; var dw = sw; var dh = sh; console.log('naturalWidth:'+transformMediaBlock.find('img')[0].naturalWidth); console.log('naturalHeight:'+transformMediaBlock.find('img')[0].naturalHeight); console.log('cssWidth:'+transformMediaBlock.find('img').width()); console.log('cssHeight:'+transformMediaBlock.find('img').height()); var ratio = (transformMediaBlock.find('img')[0].naturalWidth / transformMediaBlock.find('img').width()); console.log('ratio:'+ratio); sx = sx*ratio; sy = sy*ratio; sw = sw*ratio; sh = sh*ratio; console.log('sx*ratio:'+sx) console.log('sy*ratio:'+sy) console.log('sw*ratio:'+sw) console.log('sh*ratio:'+sh) ctx.drawImage(transformMediaBlock.find('img')[0], sx, sy, sw, sh, dx, dy, dw, dh ); }; $('#container').on('click', '.action.crop', function (e) { var transformMediaBlock = $('.mediaBlock'); transformMediaBlock.find('img').on('load', function() { crop(); }).each(function() { if(this.complete) $(this).load(); }); }); 
 .mediaBlock { position: relative; display: block; overflow: hidden; } .mediaBlock img { max-width: 100%; } .transformCropLimit { position: relative; top: 20px; left: 20px; width: 200px; height: 200px; border: 1px solid blue; } .transformCropInner { width: 300px; cursor: pointer; position: relative; top: 10px; left: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="content main"> <div class="transformCropLimit"> <div class="transformCropInner"> <div class="mediaBlock"> <img src="http://i.imgur.com/EdQs9jA.jpg"> </div> </div> </div> <div class="action crop">Crop</div> </div> <div class="canvasContainer"></div> </div> 

Pour recadrer l'image

Créez une toile de la taille de la zone de culture, puis dessinez l'image sur ce canevas. Par exemple, si vous avez une image de 500 à 400 et que vous souhaitez la recadrer vers le haut à gauche 100 100, et en bas à droite 200 200

 var crop = { top : 100, left : 100, right : 200, bottom : 200, } 

Créez une toile de largeur et de hauteur

 var canvas = document.createElement("canvas"); canvas.width = crop.right - crop.left; canvas.height = crop.bottom - crop.top; 

Ensuite, dessinez l'image sur cette toile de sorte que la partie supérieure gauche 100 100 soit à l'origine de la toile 0,0

 var ctx = canvas.getContext("2d"); // so we can draw ctx.drawImage(image, -crop.left, -crop.top); 

Et c'est ainsi que vous créez une image recadrée (le canevas Note est un HTMLImageElement)

Si vous avez mis à l'échelle des images.

 var w = image.width; var h = image.height; 

Et vous le dessinez sur une toile à une échelle

 var myScale = 0.5; // half scale 

Et vous souhaitez le recadrer via les coordonnées de la toile mise à l'échelle

 var crop = { // the canvas coordinate system top : 100, left : 100, right : 200, bottom : 200, } 

Votre image mise à l'échelle est dans le système de coordonnées de toile avec la partie supérieure gauche à (0,0) et sa largeur et sa hauteur sont w * scale , h * scale Pour la recadrer, faites une balance de l'image lorsque vous la dessinez.

Créez le canevas.

 var canvas = document.createElement("canvas"); canvas.width = crop.right - crop.left; canvas.height = crop.bottom - crop.top; 

Dessine l'image à l'échelle et décalée dans les coordonnées de l'image

 var ctx = canvas.getContext("2d"); // so we can draw ctx.scale(scale,scale); ctx.drawImage(image, -crop.left / scale, -crop.top / scale); // convert offset to // image coordinate system