Problema de Optimización en fotos

  • Autor Autor telepliz oficial
  • Fecha de inicio Fecha de inicio
prueba
Insertar CODE, HTML o 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
 
Insertar CODE, HTML o 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 😎
Insertar CODE, HTML o 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 😎
Insertar CODE, HTML o 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 😎
Insertar CODE, HTML o 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.
 
Atrás
Arriba