Problema de otimização em fotos

  • Autor Autor telepliz oficial
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
prueba
Inserir CODE, HTML ou PHP:
<h2>Optimizador de Imágenes para Blogger</h2>
<input type="file" id="upload" accept="image/*" />
<br><br>
<canvas id="canvas" style="display:none;"></canvas>
<button onclick="downloadImage()">Descargar Imagen Optimizada</button>
<script>
    const upload = document.getElementById('upload');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    upload.onchange = function (event) {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = function (e) {
            const img = new Image();
            img.onload = function () {
                canvas.width = img.width;
                canvas.height = img.height;

                ctx.drawImage(img, 0, 0, img.width, img.height);
                canvas.style.display = 'block';
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    };

    function downloadImage() {
        const quality = 0.8;
        canvas.toBlob(function(blob) {
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.download = 'imagen-optimizada.jpg';
            link.href = url;
            link.click();
            URL.revokeObjectURL(url);
        }, 'image/jpeg', quality);
    }
</script>
paso lo mismo que la otravez no perdio las dimensiones se quedo en 2000 x 3000 pero de bajarle peso a la foto le subio peso
 
paso lo mismo que la otravez no perdio las dimensiones se quedo en 2000 x 3000 pero de bajarle peso a la foto le subio peso
3.webp
 
Inserir CODE, HTML ou PHP:
const quality = 0.8;
Ajusta la calidad de compresión a 0.6 deberías obtener un archivo de imagen con un tamaño menor. Puedes experimentar con valores de calidad aún más bajos (por ejemplo, 0.5 o 0.4) para reducir aún más el peso de la imagen, pero ten en cuenta que esto podría afectar la calidad visual.
 
por ultimo para que te veas pro con tus fotos agregas tu marca de agua 😎
Inserir CODE, HTML ou PHP:
<h2>Optimizador de Imágenes para Blogger</h2>
<input type="file" id="upload" accept="image/*" />
<br><br>
<canvas id="canvas" style="display:none;"></canvas>
<button onclick="downloadImage()">Descargar Imagen Optimizada</button>
<script>
    const upload = document.getElementById('upload');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    upload.onchange = function (event) {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = function (e) {
            const img = new Image();
            img.onload = function () {
                canvas.width = img.width;
                canvas.height = img.height;

                ctx.drawImage(img, 0, 0, img.width, img.height);

                const watermarkText = 'JcDuranM.com';
                ctx.font = '48px serif';
                ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
                ctx.textAlign = 'right';
                ctx.textBaseline = 'bottom';
                ctx.fillText(watermarkText, canvas.width - 10, canvas.height - 10);

                canvas.style.display = 'block';
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    };

    function downloadImage() {
        const quality = 0.6;
        canvas.toBlob(function(blob) {
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.download = 'imagen-optimizada.jpg';
            link.href = url;
            link.click();
            URL.revokeObjectURL(url);
        }, 'image/jpeg', quality);
    }
</script>
 
por ultimo para que te veas pro con tus fotos agregas tu marca de agua 😎
Inserir CODE, HTML ou PHP:
<h2>Optimizador de Imágenes para Blogger</h2>
<input type="file" id="upload" accept="image/*" />
<br><br>
<canvas id="canvas" style="display:none;"></canvas>
<button onclick="downloadImage()">Descargar Imagen Optimizada</button>
<script>
    const upload = document.getElementById('upload');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    upload.onchange = function (event) {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = function (e) {
            const img = new Image();
            img.onload = function () {
                canvas.width = img.width;
                canvas.height = img.height;

                ctx.drawImage(img, 0, 0, img.width, img.height);

                const watermarkText = 'JcDuranM.com';
                ctx.font = '48px serif';
                ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
                ctx.textAlign = 'right';
                ctx.textBaseline = 'bottom';
                ctx.fillText(watermarkText, canvas.width - 10, canvas.height - 10);

                canvas.style.display = 'block';
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    };

    function downloadImage() {
        const quality = 0.6;
        canvas.toBlob(function(blob) {
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.download = 'imagen-optimizada.jpg';
            link.href = url;
            link.click();
            URL.revokeObjectURL(url);
        }, 'image/jpeg', quality);
    }
</script>
Gracias eres un héroe sin capas
 
por ultimo para que te veas pro con tus fotos agregas tu marca de agua 😎
Inserir CODE, HTML ou PHP:
<h2>Optimizador de Imágenes para Blogger</h2>
<input type="file" id="upload" accept="image/*" />
<br><br>
<canvas id="canvas" style="display:none;"></canvas>
<button onclick="downloadImage()">Descargar Imagen Optimizada</button>
<script>
    const upload = document.getElementById('upload');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    upload.onchange = function (event) {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = function (e) {
            const img = new Image();
            img.onload = function () {
                canvas.width = img.width;
                canvas.height = img.height;

                ctx.drawImage(img, 0, 0, img.width, img.height);

                const watermarkText = 'JcDuranM.com';
                ctx.font = '48px serif';
                ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
                ctx.textAlign = 'right';
                ctx.textBaseline = 'bottom';
                ctx.fillText(watermarkText, canvas.width - 10, canvas.height - 10);

                canvas.style.display = 'block';
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    };

    function downloadImage() {
        const quality = 0.6;
        canvas.toBlob(function(blob) {
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.download = 'imagen-optimizada.jpg';
            link.href = url;
            link.click();
            URL.revokeObjectURL(url);
        }, 'image/jpeg', quality);
    }
</script>
3.webp

esto esta pasando SIuuuu y con marca de agua y todo que BArbaro​
 
jajajajajaja un chascarrillo
 
necesitas ayuda o en que te puedo ayudar te devo una bro
Nada de eso. Para eso está el foro, para ayudarnos unos a otros. Es importante recordar que la comunidad se fortalece cuando compartimos conocimientos y experiencias. Cada pregunta y respuesta contribuye a crear un repositorio de información útil que puede beneficiar a muchos otros usuarios en el futuro. Además, al ayudar a los demás, también aprendemos y crecemos juntos. Así que, si tienes una duda o necesitas ayuda, no dudes en preguntar. Y si sabes la respuesta a una pregunta, comparte tu conocimiento. Juntos podemos hacer que este foro sea un recurso valioso para todos.
 
Voltar
Topo