javascript将图像裁剪为canvas

我想基于特定区域裁剪图像，下面的示例如何裁剪图像，使其成为蓝线内的东西（像素，数据……），并删除框外的东西（像素，数据……）？

下面的代码就是我试过的，在canvas后绘制新图像，不正确的区域我想要的，我是否会错过一些东西，如何解决？

任何建议将不胜感激。 请不要提供插件作为答案，而css crop不是我想要的。

UPDATE
https://jsfiddle.net/xqpdtq76/我更新小提琴和下面的代码，图像naturalWidth与css宽度不同，所以我需要转换裁剪x，y，宽度，高度（sx，sy，sw，sh）以适应自然图像大小和裁剪图像。
结果似乎裁剪正确的区域，但图像不正确的比例..我不明白为什么

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 = $('',{'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; } 

  
 
 
 
 
  
 
 
 
Crop
 
 
  

Answer 1

裁剪图像

创建一个裁剪区域大小的canvas，然后在该canvas上绘制图像。 例如，如果您有500 x 400图像，并且想要将其裁剪到左上角100,100，右下角200,200

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

创建正确宽度和高度的canvas

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

然后将图像绘制到该canvas上，使左上角100,100位于canvas原点0,0

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

这就是你创建一个裁剪图像的方法（Note canvas是一个HTMLImageElement）

如果您有缩放图像。

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

然后你在一个规模的canvas上绘制它

 var myScale = 0.5; // half scale 

并且您想通过缩放的canvas坐标裁剪它

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

缩放的图像位于canvas坐标系中，左上角为（0,0），宽度和高度为w * scale ， h * scale要裁剪，只需在绘制时缩放图像。

创建canvas。

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

在图像坐标中绘制缩放和偏移的图像

 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