javascript将图像裁剪到画布

Posted 2023-02-25

【中文标题】javascript将图像裁剪到画布

【英文标题】：javascript crop image to canvas

【发布时间】：2016-10-11 00:33:05

【问题描述】：

我想根据特定区域裁剪图像，下面的示例如何裁剪图像，使其仅变成蓝线内的东西（像素，数据......），并删除外面的东西（像素，数据......）盒子？

下面的代码是我尝试过的，在画布绘制新图像后，我想要的区域不正确，我错过了什么，如何解决？

任何建议将不胜感激。 请不要提供插件作为答案，css裁剪不是我要找的。​​p>

更新https://jsfiddle.net/xqpdtq76/ 我更新了小提琴和下面的代码，图像 naturalWidth 与 css 宽度不同，所以我需要转换裁剪 x,y,width,height (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 = $('<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>

【问题讨论】：

您是否尝试过使用 300 像素宽的图像？它看起来在您的小提琴中，就像您使用的是通过 css 调整大小的更大图像

使用this placehold.it 图像进行测试，似乎可以正常工作，但您的画布输出的尺寸错误

感谢回复，我发现裁剪区域似乎基于原始图像大小，而不是 css 样式。所以我想我必须将 sw sh 转换为适合原始图像大小

我不知道如何隐藏 sx sy... 试图找到一种方法 drawimage 缩放与 css 相同的大小，然后裁剪它

我不是 100% 确定这一点，但我认为从 imgur 中提取图像并将其裁剪到画布中将不允许您提取数据，因为 CORS 限制。我知道这对于视频来说是正确的，如果它是图像，我假设画布也被外部来源污染......

【参考方案1】：

裁剪图像

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

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

创建一个正确宽度和高度的画布

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

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

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

这就是创建裁剪图像的方式（注意画布是 htmlImageElement）

如果您有缩放图像。

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

然后你在画布上按比例绘制它

var myScale = 0.5; // half scale

并且您想通过缩放的画布坐标对其进行裁剪

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

缩放后的图像位于画布坐标系中，左上角为 (0,0)，其宽度和高度分别为 w * scale、h * scale 要裁剪它，只需在绘制时缩放图像即可。

创建画布。

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

【讨论】：

我想你在这里错过了 OP 的真正问题：他的图像的 naturalWidth 是 2048，而他以 300px 显示它。 drawImage 使用 naturalWidth。

??感谢您的回复，但这在我的问题中显示相同

是的，我的问题是我无法使用 naturalWidth 获得隐蔽的 sy sx sw sh

@user1775888 你需要图像大小，然后你可以缩放它。我添加了有关如何缩放和剪辑的信息，并修改了您的小提琴jsfiddle.net/blindman67/gqc6bdw0，以便它在 javascript 中加载图像，这样您就可以获得图像像素大小，因为如果您通过 DOM 加载它，您会丢失该信息。我还发现 jQuery 让一切变得如此复杂，所以 fiddle 只是在 JS 中完成，你可以添加 jQuery 的东西

因为jQuery设置canvas.style.width来设置显示大小，而canvas.width是改变分辨率的元素属性