How to Use a PHP Image Compression Before Upload Using JavaScript Library as Part of the Package Projeto Loja: Resize and compress uploaded images

Recommend this page to a friend!

Download

Info

Example

Files

Install with Composer

Download

Reputation

Support forum

Blog

Links

Last Updated		Ratings				Unique User Downloads		Download Rankings
2026-02-10 (12 days ago)		Not yet rated by the users				Total: Not yet counted		Not yet ranked

Version		License		PHP version		Categories
`projeto-loja` 1.0.0		MIT/X Consortium ...		7		Graphics, E-Commerce, PHP 7, Applicat...

Description

Author

Rodrigo Faustino

This package can resize and compress uploaded images.

It provides a JavaScript component that can take a picture and use a canvas object to scale and compress an image file and convert the image to the WebP format.

The package also provides PHP classes that can process images and store them as server side files as part of the details of products stored in a database.

Rodrigo Faustino

Performance

Level

Name:	Rodrigo Faustino `<contact>`
Classes:	45 packages by Rodrigo Faustino
Country:	Brazil
Age:	42
All time rank:	2330	158 in Brazil
Week rank:	1

Level 1

Innovation award

Nominee: 28x

Winner: 6x

Instructions

In Portuguese:

Por favor, leia esse documento para aprender a instalar e configurar este projeto para armazenamento de dados de produtos de uma loja que t�m imagens.

Example


<?php

use Psr\Http\Message\ResponseInterface as Response;

use Psr\Http\Message\ServerRequestInterface as Request;

use Slim\Factory\AppFactory;

use DI\ContainerBuilder; // Importante

use App\ProductController;

use App\AssetManager;

require __DIR__ . '/../api_core/vendor/autoload.php';



// 1. Carregar Vari�veis de Ambiente (.env)

$dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/../api_core');

$dotenv->load();



// 2. Configurar Container de Inje��o de Depend�ncia

$containerBuilder = new ContainerBuilder();



// Carrega nossas defini��es do arquivo dependencies.php

$dependencies = require __DIR__ . '/../api_core/dependencies.php';

$dependencies($containerBuilder);



$container = $containerBuilder->build();



// 3. Criar o App usando o Container

AppFactory::setContainer($container);

$app = AppFactory::create();



$app->addErrorMiddleware(true, true, true);



// --- ROTAS ---



$app->get('/', function (Request $request, Response $response) {

    // Pega a tag do script correta (Dev ou Prod)

    $scriptTag = AssetManager::getScriptTag();



    $html = "

    <!DOCTYPE html>

    <html lang='pt-BR'>

    <head>

        <meta charset='UTF-8'>

        <meta name='viewport' content='width=device-width, initial-scale=1.0'>

        <title>Loja Integrada</title>

        </head>

    <body>

        <div id='app'>

            <h1>Upload de Produtos</h1>

            

            <input type='file' id='uploadInput' accept='image/*' />

            

            <div id='previews'>

                <img id='previewOriginal' style='max-width:200px' />

                <div id='infoOriginal'></div>

                

                <img id='previewCompressed' style='max-width:200px' />

                <div id='infoCompressed'></div>

            </div>

        </div>



        {$scriptTag}

        

    </body>

    </html>

    ";



    $response->getBody()->write($html);

    return $response;

});



$app->post('/products', [ProductController::class, 'create']);



$app->run();

Details

Projeto Loja - Modulo de Compressao de Imagens no Frontend

Este documento descreve a arquitetura e as decisoes tecnicas por tras do modulo de upload e compressao de imagens deste projeto. O foco principal e a eficiencia e a experiencia do usuario, transferindo a carga pesada de processamento de imagem do servidor para o dispositivo do cliente (navegador).

Decisao Tecnica: Compressao no Frontend (Client-Side)

Tradicionalmente, uploads de imagens funcionam enviando o arquivo original (muitas vezes com 5MB, 10MB ou mais) para o servidor, que entao processa, redimensiona e comprime a imagem.

Neste projeto, adotamos uma abordagem moderna de pr�-processamento no cliente.

Por que essa decisao foi tomada?

Economia de Banda e Dados: Em vez de enviar uma imagem de 10MB em uma conexao movel instavel, o usuario envia apenas a versao processada (ex: 50KB a 150KB). Isso torna o upload quase instantaneo.
Reducao de Custo de Servidor: O processamento de imagem (redimensionamento e re-codificacao) e intensivo em CPU. Ao fazer isso no navegador, distribuimos essa carga computacional para os dispositivos dos usuarios, permitindo que o servidor atenda muito mais requisicoes com menos hardware.
Experiencia do Usuario (UX): O usuario ve o resultado final antes de enviar. Se a imagem ficar ruim ou cortar algo importante, ele sabe na hora. Alem disso, extraimos metadados (como a cor predominante) instantaneamente para efeitos visuais imediatos.
Armazenamento Otimizado: O backend ja recebe o arquivo pronto para ser salvo no S3/Disco, sem necessidade de pipelines complexos de pos-processamento.

Estrutura de Pastas e Integracao

A organizacao do projeto separa claramente as responsabilidades, mas mantem uma integracao fluida entre Backend e Frontend:

api_core/: Contem a logica de negocio, classes PHP (incluindo o novo `AssetManager`) e dependencias.
frontend_src/: Codigo fonte Javascript e configuracoes do Vite.
public_html/: Ponto de entrada. O `index.php` agora serve nao apenas a API, mas tambem renderiza o HTML inicial da aplicacao.

Integracao Inteligente (AssetManager)

O projeto utiliza uma classe AssetManager para gerenciar como os scripts sao carregados:

Modo Desenvolvimento: Se o arquivo `manifest.json` nao for encontrado, o sistema assume que voce esta rodando o servidor Vite (`npm run dev`). O PHP entao injeta uma tag `<script>` apontando para `http://localhost:3000/main.js`, permitindo Hot Module Replacement (HMR).
Modo Producao: Ao rodar `npm run build`, o Vite gera os arquivos estaticos otimizados e um `manifest.json`. O PHP le este manifesto e aponta para os arquivos com hash (ex: `/assets/main.x82a.js`), garantindo cache-busting eficiente.

Como Instalar e Rodar

Siga os passos abaixo para configurar o ambiente de desenvolvimento.

1. Instalacao das Dependencias do Backend

Navegue ate a pasta do nucleo da API e instale as bibliotecas PHP:

cd api_core
composer install

2. Instalacao das Dependencias do Frontend

Navegue ate a pasta dos arquivos fonte do frontend e instale as ferramentas Node.js:

cd ../frontend_src
npm install

3. Rodando o Projeto

Voce precisara de dois terminais abertos simultaneamente.

Terminal 1 (Build do Frontend em tempo real): Este comando vai monitorar mudancas no JS e atualizar os arquivos na pasta publica.

cd frontend_src
npm run dev

Terminal 2 (Servidor PHP): Inicie o servidor embutido do PHP apontando para a pasta publica.

cd public_html
php -S localhost:8000

Acesse no navegador: http://localhost:8000

Implantacao em Producao (Build)

Para rodar o projeto em um ambiente de producao (ou simular o comportamento final), voce nao precisa manter o terminal do Node aberto.

1. Gerar o Build

Este comando vai processar todos os arquivos JS/CSS, minifica-los e salva-los na pasta public_html/assets.

cd frontend_src
npm run build

2. Rodar Apenas o PHP

Apos o build, o Node.js nao e mais necessario. O PHP detectara automaticamente os arquivos gerados atraves do AssetManager.

cd ../public_html
php -S localhost:8000

3. Configuracao em Hospedagem Compartilhada (.htaccess)

Caso voce nao tenha acesso para mudar a pasta raiz do servidor (DocumentRoot) para public_html, voce pode criar um arquivo .htaccess na raiza do projeto com o seguinte conteudo para redirecionar todo o trafego:

Arquivo: /.htaccess

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{REQUEST_URI} !^public_html
    RewriteRule ^(.*)$ public_html/$1 [L]
</IfModule>

Isso fara com que o site carregue corretamente mesmo se os arquivos estiverem fora da pasta publica padrao.

Analise dos Arquivos Principais

A logica central reside em dois arquivos JavaScript na pasta frontend_src.

1. image-compressor.js (O Motor)

Este e um modulo ES6 puro, agnostico de framework, focado em uma unica responsabilidade: transformar um arquivo bruto em um arquivo otimizado.

Principais Funcionalidades: API Canvas*: Utiliza o elemento canvas HTML5 para renderizar e redimensionar a imagem com alta performance. Algoritmo de Media de Cor (getAverageColor)*: Implementa uma leitura direta dos bytes da imagem para calcular a cor media dominante. Isso e feito amostrando pixels para garantir que a operacao leve apenas alguns milissegundos. Conversao WebP*: Exporta nativamente para o formato WebP, que oferece compressao superior ao JPEG/PNG com menor perda de qualidade. Retorno Rico*: Devolve um objeto contendo metadados valiosos: dimensoes originais vs. finais, tamanho em bytes e a cor hexadecimal extraida.

2. main.js (O Orquestrador)

Este arquivo atua como a camada de controle, ligando a interface do usuario (DOM) a logica de compressao.

Fluxo de Trabalho: 1. Preview Imediato: Mostra a imagem original instantaneamente ao usuario. 2. Processamento Assincrono: Chama a compressao e aguarda o resultado sem travar a interface. 3. Feedback Visual: Exibe a comparacao de tamanho e a cor predominante. 4. Preparacao para Envio: Constroi o FormData anexando o arquivo ja processado (WebP) e nao o original. 5. Envio de Metadados: Envia tambem largura, altura e cor dominante como campos de texto para o backend.

Potencial do Projeto

Este modulo serve como um modelo de arquitetura que pode ser replicado em diversas aplicacoes. Ele nao e apenas um script de upload, mas uma solucao completa de tratamento de midia.

Casos de Uso:

E-commerce: Upload de produtos onde a padronizacao e velocidade sao cruciais.
Redes Sociais: Upload de fotos de perfil ou feed, onde a compressao rapida e essencial.
Sistemas de Documentos: Pre-tratamento de fotos de documentos para reduzir tamanho.
Apps Offline-First: Preparar imagens para serem salvas localmente antes de sincronizar.

Extensibilidade:

O codigo e modular. O componente de compressao pode ser importado em projetos React, Vue, Angular ou React Native.

Files (19)

File	Role	Description
`api_core` (5 files, 1 directory)
`frontend_src` (6 files)
`public_html` (1 file, 1 directory)
`.htaccess`	Data	Auxiliary data
`README.md`	Doc.	Documentation

Files (19)

api_core

File	Role	Description
`src` (3 files)
`.env`	Data	Auxiliary data
`composer.json`	Data	Auxiliary data
`composer.lock`	Data	Auxiliary data
`dependencies.php`	Class	Class source
`product.sql`	Data	Auxiliary data

Files (19)

api_core

src

File	Role	Description
`AssetManager.php`	Class	Class source
`ProductController.php`	Class	Class source
`ProductRepository.php`	Class	Class source

Files (19)

frontend_src

File	Role	Description
`image-compressor.js`	Data	Auxiliary data
`index.html`	Doc.	Documentation
`main.js`	Data	Auxiliary data
`package-lock.json`	Data	Auxiliary data
`package.json`	Data	Auxiliary data
`vite.config.js`	Data	Auxiliary data

Files (19)

public_html

File	Role	Description
`assets` (2 directories)
`index.php`	Example	Example script

Files (19)

public_html

assets

File	Role	Description
`.vite` (1 file)
`assets` (1 file)

Files (19)

public_html

assets

.vite

File	Role	Description
`manifest.json`	Data	Auxiliary data

Files (19)

public_html

assets

assets

File	Role	Description
`main-DBEAv0TD.js`	Data	Auxiliary data

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.

Install with Composer

	projeto-loja-2026-02-10.zip 28KB
	projeto-loja-2026-02-10.tar.gz 25KB
	Install with Composer

Version Control

Unique User Downloads

100%

Total:	0
This week:	0

Applications that use this package

No pages of applications that use this class were specified.

If you know an application of this package, send a message to the author to add a link here.

About us

Advertise on this site

For more information send a message to info at phpclasses dot org.