html微信头像截取的代码

微信头像截取是一个很常见的应用场景，以下是一个使用HTML实现的微信头像自动截取的代码：

div id="preview">
    /div>
    input type="file" id="fileInput" />
    script>
    var imgSrc = "";
    var imgWidth, imgHeight;
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
document.getElementById("fileInput").onchange = function(){
    var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
    alert("请确保文件为图像类型！");
    return false;
}
    var reader = new FileReader();
    reader.readAsDataURL(file);
reader.onload = function(){
    imgSrc = this.result;
    var img = new Image();
    img.src = imgSrc;
img.onload = function(){
    imgWidth = this.width;
    imgHeight = this.height;
    var ratio = imgWidth/imgHeight;
    canvas.width = canvas.height = Math.min(imgWidth, imgHeight);
    var x = (imgWidth-canvas.width)/2;
    var y = (imgHeight-canvas.height)/2;
    ctx.drawImage(img, x, y, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
    document.getElementById("preview").style.backgroundImage = "url("+canvas.toDataURL()+")";
}
}
}
    /script>
    

代码中包含了一个文件选择框和一个预览框。当用户选择文件时，通过FileReader将图片转化为base64编码的字符串，并读取图片的宽度和高度。将canvas的大小设置为宽度和高度的最小值，再根据原图片的宽高比计算需要裁剪的位置和大小。将原图片裁剪后绘制到canvas中，并将结果显示在预览框中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！