在这篇文章中，我将分享一个简单的Typescript代码段，你可以很容易地转换为Javascript，在不依赖任何第三方库的情况下调整图像大小和裁剪。
这个代码片断首先提示你使用HTMLInputElement选择一个本地图片。
一旦选择了图片，使用FileReaderAPI，它将图片加载到HTMLImageElement中，而不将其添加到HTML DOM中。
一旦图像从本地文件系统加载到HTMLImageElement中，我们就调用javascript函数
resizeAndSquareImage。
这个函数对图像进行大小调整和裁剪，使其成为一个完美的正方形图像!
成方形的图像被写入HTMLCanvasElement。
这里是HTML。
<html>
<body>
<label for="changeImage">Choose the image you want to square:</label>
<p/>
<input type="file"
id="changeImage" name="changeImage"
accept="image/png, image/jpeg" imgid="squaredImage" >
<p/>
<canvas id="squaredImage" url="/no-image-selected.jpg" width="256" height="256"/>
<p/>
</body>
</html>
以及Javascript/Typescript代码。
let changeImage = function (evt: React.ChangeEvent<{ name?: string; value: unknown }>) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
// FileReader support
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
let targetCanvas = document.getElementById(evt.target.getAttribute("imgid"));
resizeAndSquareImage(fr.result, targetCanvas);
}
fr.readAsDataURL(files[0]);
}
}
function resizeAndSquareImage(imageUrl:string, targetCanvas:HTMLCanvasElement) {
// this image will hold our source image data
const inputImage:HTMLImageElement = new Image();
console.log("resizeAndSquareImage called");
// we want to wait for our image to load
let result = inputImage.onload = () => {
const imgSize:number = Math.min(inputImage.width, inputImage.height);
const left:number = (inputImage.width - imgSize) / 2;
const top:number = (inputImage.height - imgSize) / 2;
const ctx:CanvasRenderingContext2D = targetCanvas.getContext("2d");
ctx.drawImage(inputImage, left, top, imgSize, imgSize, 0, 0, targetCanvas.width, targetCanvas.height);
return targetCanvas;
};
inputImage.src = imageUrl;
return result;
}
document.getElementById("changeImage").onchange = changeImage;
希望这篇简短的博文对你有用!
