用JS制作图片拖拽上传制作ico图标在线转换工具后记

代码4个月前更新

107 0 0

前俩天，我在做Favicon.ico图标在线转换工具的时候，找了很多在线工具案例，感觉界面都大同小异，很多直接是在github上拿的，界面也没改，于是想自己写个界面。

演示图

用JS制作图片拖拽上传制作ico图标在线转换工具后记
因为自带的input上传太丑了，所以我就把上传图片这里改成了拖拽上传，

图片拖拽上传后，做了显示图片名称的处理

最终成品演示

Favicon.ico图标在线转换

可以将jpg、jpeg、gif、png等图像转换成ico图标。

直接上HTML代码

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
    }
    .container {
        max-width: 600px;
        margin: 50px auto;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    #drop-area {
        border: 2px dashed #ccc;
        border-radius: 5px;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        margin-bottom: 20px;
    }
    #preview {
        width: 100px;
        height: 100px;
        border: 2px solid #ccc;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    #icon-options {
        margin-top: 20px;
    }
    #fileElem {
        display: none; /* 隐藏input元素 */
    }
    #fileTrigger {
        display: inline-block;
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
<div class="container">
    <div id="drop-area" ondragover="event.preventDefault()" ondrop="dropHandler(event)">
        <span id="fileName">拖放一张图片到这里，或者 <label for="fileElem" id="fileTrigger">选择图片</label></span>
        <input type="file" id="fileElem" onchange="handleFiles(this.files)" multiple accept="image/jpeg, image/png, image/gif">
    </div>
    <div id="preview"></div>
    <div id="icon-options">
        <label>
            <input type="radio" name="icon-size" value="16"> 16X16
        </label>
        <label>
            <input type="radio" name="icon-size" value="32"> 32X32
        </label>
        <label>
            <input type="radio" name="icon-size" value="48"> 48X48
        </label>
        <label>
            <input type="radio" name="icon-size" value="96"> 96X96
        </label>
        <label>
            <input type="radio" name="icon-size" value="128" checked> 128X128
        </label>
    </div>
</div>

<script>
    const dropArea = document.getElementById('drop-area');
    const preview = document.getElementById('preview');
    const fileName = document.getElementById('fileName');

    dropArea.addEventListener('click', () => {
        document.getElementById('fileElem').click();
    });

    function dropHandler(event) {
        event.preventDefault();
        const file = event.dataTransfer.files[0];
        if (file && file.type.startsWith('image/')) {
            displayImage(file);
            fileName.textContent = file.name;
        } else {
            alert('请上传图片文件。');
        }
    }

    function displayImage(file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = new Image();
            img.src = e.target.result;
            img.style.width = '100px';
            img.style.height = '100px';
            img.style.display = 'block';
            img.style.margin = '0 auto';
            preview.innerHTML = '';
            preview.appendChild(img);
        }
        reader.readAsDataURL(file);
    }

    // 当用户选择图片时调用该函数
    function handleFiles(files) {
        const file = files[0];
        if (file && file.type.startsWith('image/')) {
            displayImage(file);
            fileName.textContent = file.name;
        } else {
            alert('请上传图片文件。');
        }
    }

    // 拖拽图片至页面任意位置也能预览
    document.addEventListener('dragover', function(e) {
        e.preventDefault();
    });

    document.addEventListener('drop', function(e) {
        e.preventDefault();
        const file = e.dataTransfer.files[0];
        if (file && file.type.startsWith('image/')) {
            displayImage(file);
            fileName.textContent = file.name;
        } else {
            alert('请上传图片文件。');
        }
    });
</script>

代码只有界面部分，如果需要逻辑部分，请参考这个github上这个作者的源码tdouguo/ico_php
作者的源码，在上传PNG透明图片，会给透明背景加黑色背景，我对其进行了修复，如有需要的，可留言。