PHP多功能图片编辑器

news2024/10/25 2:38:07

PHP多功能图片编辑器

前言
效果图
功能说明
平台支持情况
部分源码
领取源码
下期更新

前言

PHP多功能图片编辑器工具箱网站源码无需数据库上传即用，测试了一下还可以，免费分享自行研究。

效果图

在这里插入图片描述

功能说明

✓ 无需上传，使用浏览器自身进行转换
✓ 批量转换输出webp、jpeg、png、base64、8位png(实验)、gif动图(实验)、webp动图(实验)
✓ 输出指定大小(webp、jpeg)(实验)
✓ 输出颜色数量(gif、png-8)
✓ 选项可自定增加或删除并持久化

平台支持情况

	谷歌Chrome	火狐Firefox	苹果Safari	微软Edge	IE
Windows	✔️	✔️	-	✔️	❌
Mac OS	✔️	✔️	☑️	✔️	-
Iphone	☑️	☑️	✔️	-	-
Android	?	?	?	-	-
️️

✔️ 运行良好 ☑️ 部分支持 ❌ 不支持 ? 未测试

部分源码

let allOkFiles = [],
    alltType = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'ico', 'bmp', 'vnd.microsoft.icon'],
    outType = ['jpeg', 'png', 'webp', 'ico'],
    config = {}

let input = document.getElementById("files")
input.addEventListener('change', function() {
    readFiles([...this.files])
}, false)
// 读取并转换图片,全部放进allOkFiles
async function readFiles(allFiles) {
    let files = [...allFiles]
    if (files.length === 0) return
    document.getElementById('loading').style.display = 'block'
    setConfig()
    allOkFiles = []
    files.map(async (file, index) => {
        //获取base64
        let base64 = await file2Base64(file)
        //获取宽和高
        let wAndH = await getImagesWidthHeight(base64)
        let name = () => {
            let n = alltType.filter(f => file.name.endsWith(f))
            return {
                name: file.name.replace(n[0], ''),
                type: n[0]
            }
        }
        // 转换
        let blob = await base642file(base64, config.type, config.size, config.quality)
        allOkFiles.push({
            name: name().name,
            type: name().type,
            base64: base64,
            size: file.size,
            width: wAndH.w,
            height: wAndH.h,
            data: blob
        })
        //遍历完所有文件后
        if (files.length === allOkFiles.length) {
            console.log(allOkFiles)
            //不打包
            if (config.isZip) {
                allOkFiles.map(x => {
                    funDownload(x.data, `${x.name}.${config.type}`)
                })
                document.getElementById('loading').style.display = 'none'
                document.getElementById('pyro').innerHTML =
                    `
                    <div class="before"></div>
                    <div class="after"></div>
                    `
            }
            //打包
            else {
                let zip = new JSZip()
                let time = new Date().getTime()
                let img = zip.folder(time)
                allOkFiles.map(x => {
                    img.file(`${x.name}.${config.type}`, x.data, {
                        base64: false
                    })
                })
                zip.generateAsync({
                        type: "blob"
                    })
                    .then(function(content) {
                        funDownload(content, `${time}.zip`)
                        document.getElementById('loading').style.display = 'none'
                        document.getElementById('pyro').innerHTML =
                            `
                            <div class="before"></div>
                            <div class="after"></div>
                            `
                    })
            }
            // 显示图片
            let img_box = document.getElementById("img_box")
            let img_html = ``
            allOkFiles.map(x => {
                img_html = img_html +
                    `<div class="img_one">
                        <p class="type ${x.type}">${x.type}</p>
                        <p class="size">${x.width}x${x.height}</p>
                        <img src="${x.base64}" alt="">
                    </div>`
            })
            img_box.innerHTML = img_html
        }
    })
}