Problema de Optimización en fotos

telepliz oficial · 20 May 2024

jcduranm dijo:

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

telepliz oficial · 20 May 2024

telepliz oficial dijo:
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

jcduranm · 20 May 2024

telepliz oficial dijo:
Ver el archivo adjunto 1266878

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.

jcduranm · 20 May 2024

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>

telepliz oficial · 20 May 2024

jcduranm dijo:

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

telepliz oficial · 20 May 2024

jcduranm dijo:

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>

esto esta pasando SIuuuu y con marca de agua y todo que BArbaro

jcduranm · 20 May 2024

jajajajajaja un chascarrillo

telepliz oficial · 20 May 2024

jcduranm dijo:
jajajajajaja un chascarrillo

necesitas ayuda o en que te puedo ayudar te devo una bro

jcduranm · 20 May 2024

telepliz oficial dijo:
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.

Problema de Optimización en fotos

telepliz oficial

telepliz oficial

jcduranm

jcduranm

telepliz oficial

telepliz oficial

jcduranm

telepliz oficial

jcduranm

Temas similares

Privacidad y transparencia

Privacidad y transparencia