Danyal Awan Ответов: 1

Я хочу изменить исходную ширину и высоту изображения с помощью javascript/jquery и сохранить его с помощью laravel

Я пробовал, но это только изменение ширины и высоты с помощью CSS, и мне нужно, чтобы сохранить его после изменения размеров.

Что я уже пробовал:

var resize = $('[id*=uploadImage]').croppie({
    enableExif: true,
    enableOrientation: true,    
    viewport: { // Default { width: 100, height: 100, type: 'square' } 
        width: 200,
        height: 200,
        type: 'square' //circle
    },
    boundary: {
        width: 300,
        height: 300
    }
});

1 Ответов

Рейтинг:
0

Sandeep Mewara

Поверьте, это должно помочь: Сжать, изменить размер и редактировать изображения с помощью JavaScript прямо в браузере - zocada[^]

Воспользуйтесь преимуществами холста HTML5, который используется для рисования графики на веб-странице. 

/*
<!-- HTML Part -->
<input id="file" type="file" accept="image/*">
<script>
    document.getElementById("file").addEventListener("change", function (event) {
	compress(event);
});
</script>
*/

compress(e) {
    const width = 500;
    const height = 300;
    const fileName = e.target.files[0].name;
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = event => {
        const img = new Image();
        img.src = event.target.result;
        img.onload = () => {
                const elem = document.createElement('canvas');
                elem.width = width;
                elem.height = height;
                const ctx = elem.getContext('2d');
                // img.width and img.height will contain the original dimensions
                ctx.drawImage(img, 0, 0, width, height);
                ctx.canvas.toBlob((blob) => {
                    const file = new File([blob], fileName, {
                        type: 'image/jpeg',
                        lastModified: Date.now()
                    });
                }, 'image/jpeg', 1);
            },
            reader.onerror = error => console.log(error);
    };
}