如何绘制图像或裁剪图像以适合控件尺寸

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

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

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

注意事项 ：

这只是根据您的描述进行的模拟，请尝试使其适合您的实际项目。 如果您有任何疑问或需要更新我的解决方案。 请告诉我。

更新 ：

如果要裁剪图像，则只需在CSS样式中添加min-width和in-height ：

#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>