价值200万的超椭圆LOGO生成小工具-嗨皮网-Hpeak.net

小米的logo公式

|x|^n+|y|^n=1

在网上找的裁剪工具例如 https://mi-logo.lvwzhen.com/

但是他的不能拿自己的图片进行裁剪只有下方两种样式，不太符合我的要求。

于是，在AI工具的帮助下，写了一个可以裁剪自己图片为类小米logo的工具。

代码分享

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上传并裁剪成超椭圆图像</title>
<style>
    body {
        font-family: 'Arial', 'Microsoft YaHei', sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f2f5;
    }
    h2 {
        color: #333;
    }
    input[type="file"], button {
        margin-bottom: 20px;
        padding: 10px 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
        cursor: pointer;
        transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }
    input[type="file"]:hover, button:hover {
        border-color: #007bff;
        background-color: #007bff;
        color: #fff;
    }
    canvas {
        border: 2px solid #007bff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
    }
    .container {
        max-width: 600px;
        text-align: center;
    }
</style>
</head>
<body>
 
<div class="container">
    <h2>选择一张图片进行裁剪</h2>
    <input type="file" id="imageLoader" name="imageLoader"/>
    <button id="downloadButton">下载图像</button>
    <canvas id="superEllipseCanvas" width="400" height="400"></canvas>
</div>
 
<script>
function superEllipse(angle, n) {
    const rad = angle * Math.PI / 180; // 将角度转换为弧度
    const x = Math.pow(Math.abs(Math.cos(rad)), 2 / n) * (Math.cos(rad) >= 0 ? 1 : -1);
    const y = Math.pow(Math.abs(Math.sin(rad)), 2 / n) * (Math.sin(rad) >= 0 ? 1 : -1);
    return [x, y];
}
 
document.getElementById('imageLoader').addEventListener('change', handleImage, false);
 
function handleImage(e) {
    const reader = new FileReader();
    reader.onload = function(event) {
        const img = new Image();
        img.onload = function() {
            const canvas = document.getElementById('superEllipseCanvas');
            const ctx = canvas.getContext('2d');
            const n = 3; // 超椭圆的 n 值
 
            // 清除画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
 
            // 绘制超椭圆
            ctx.beginPath();
            for (let i = 0; i <= 360; i++) {
                const [x, y] = superEllipse(i, n);
                const cx = (x + 1) * canvas.width / 2;
                const cy = (1 - y) * canvas.height / 2;
                if (i === 0) {
                    ctx.moveTo(cx, cy);
                } else {
                    ctx.lineTo(cx, cy);
                }
            }
            ctx.closePath();
            ctx.clip(); // 将绘制区域裁剪为超椭圆形状
 
            // 缩放和定位图片以适应超椭圆
            const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
            const x = (canvas.width - img.width * scale) / 2;
            const y = (canvas.height - img.height * scale) / 2;
            ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(e.target.files[0]);
}
 
document.getElementById('downloadButton').addEventListener('click', function() {
    const canvas = document.getElementById('superEllipseCanvas');
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = 'super_ellipse_image.png';
    link.click();
});
</script>
 
</body>
</html>

本文转载自：https://www.naigou.cn/483.html

文章版权声明 1、本网站名称：嗨皮网|Hpeak.net
2、本站永久网址：https://www.hpeak.net
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ735301834进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

转载 LOGO
# 小米 # 小米LOGO

价值200万的超椭圆LOGO生成小工具

小米的logo公式

代码分享

请登录后发表评论