Question

我有2个JavaScript页面。第一个具有图像控件，第二个具有将回调作为图像返回的功能。

第1页：

 //Calls the function from page 2 and the callback image is set as the source of the control.

previewImage(current, function(img) {
    jQuery(".mapItem").attr("src",img.src);
});

第2页：

//The functions callback returns an image which we use in page 1 (above)

var canvas = document.createElement('canvas');
context = canvas.getContext('2d');

context.drawImage(this.m_Images[i],0,0,canvas.width,canvas.height);
var t = new Image();
t.src = canvas.toDataURL();
callback(t);

问题：

我在第1页的控件（.mapItem）的高度和宽度为75.2px（已修复）然而，来自回调的图像每次都会有不同的大小，例如一天它可以是200px * 300px，一天它可以是150px * 200px等

如何剪辑回调图像？我希望图像（t）为零（0）为x和y起点，然后将图像剪切到.mapItem控制高度和宽度的位置。

我需要这个比例。所以我不能添加以下代码：

context.drawImage(this.m_Images[i],0,0,72.5,72.5);因为这会破坏图像，因为我们甚至不知道它是否是方形的。

我该怎么办？

提前致谢：）

Answer 1

我试图模拟您的环境，所以在这里您有一个可能的解决方案。

loadImage就像您在中拥有的图片加载器一样。
加载回调调用previewImage()方法。
此方法接收img提取width，height使用aspectRatioFit()方法计算宽高比。
最后将图片绘制到第1页中的mapItem元素中。

注意：

这只是基于您的描述的模拟尝试使其适应您的真实项目。如果您有疑问或需要更新我的解决方案。请告诉我。

<强>更新：

如果您想裁剪图片，只需将min-width和in-height添加到CSS样式中：

#mapItem {
    display: block;
    overflow: hidden;
    height: 75px;
    width: 75px;
}

#mapItem canvas {
    display: block;     // Otherwise it keeps some space around baseline
    min-width: 100%;    // Scale up to fill container width
    min-height: 100%;   // Scale up to fill container height
    -ms-interpolation-mode: bicubic; // Scaled images look a bit better in IE now
}

这将裁剪您从第1页收到的图像。

function loadImage() {
  var preview = document.getElementById('source_image');
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();
  reader.addEventListener('load', function(e) {
    preview.src = e.target.result;
    preview.onload = function() {
      previewImage(this);
    };
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
};

function previewImage(img) {
  console.log(img.width + ' ' + img.height);
  var maxSize = {
    width: 75,
    height: 75
  };
  var croppedImage = document.getElementById('mapItem');
  var canvas = document.createElement('canvas');
  var ctx;
  //var newSize = aspectRatioFit(img.width, img.height, maxSize.width, maxSize.height);
  canvas.width = img.width;
  canvas.height = img.height;
  croppedImage.appendChild(canvas);
  ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

function aspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
  var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
  return {
    width: srcWidth * ratio,
    height: srcHeight * ratio
  };
}

.clear {
  padding-bottom: 20%;
}

#mapItem {
    display: block;
    overflow: hidden;
    height: 75px;
    width: 75px;
}

#mapItem canvas {
    display: block; /* Otherwise it keeps some space around baseline */
    min-width: 100%;    /* Scale up to fill container width */
    min-height: 100%;   /* Scale up to fill container height */
    -ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */
}

<input type="file" onchange="loadImage()"><br>
<div>
  <h3>Image in Page 2</h3>
  <img id="source_image" alt="Image preview..." />
</div>
<div>
  <h3>Image In page 1</h3>
  <div id="mapItem">
  </div>
</div>

<div class="clear">
</div>

如何绘制图像或剪辑我的图像以适应我的控制尺寸

1 个答案: