Image Compressor / Улучшение / Плагины Bootstrap

Версия: v1.1.4

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 85.1 Kb

Уникальный ID: 3338

Посмотрели: 1374 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 21 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 4 голосов

Тип лицензии: CC BY 4.0

Авторство: //github.com/xkeshi/image-compressor

Информация: Пользователям

Информация: Правообладателям

Теги: сжать фото, bootstrap 4, сжать картинку, Plugin, Image Compressor, canvas.toBlob, сжать изображение, compressor img

Поделился: BootstrapТема

Добавлено: 2019-02-06 в 20:05

Метка: 1582270798

⇄ ⇅

<div class="container">
 <h3 class="text-center">Image Compressor & BootstrapTema</h3>
 <hr>
 <div id="app">
 <div class="card bg-light mb-4" @change="change" @dragover="dragover" @drop="drop">
 <div class="card-body">
 <div class="p-5 text-center">Drop image here or <input type="file" id="file" accept="image/jpeg,image/jpg,image/jpe,image/png,image/gif,image/webp,image/bmp,image/tiff" ref="input"></div>
 </div>
 </div>
 <div class="row">
 <div class="col-lg-4 mb-4">
 <div class="card">
 <div class="card-body">
 <h3 class="card-title">Options</h3>
 <hr>
 <fieldset class="form-group">
 <div class="form-check form-check-inline">
 <input type="checkbox" name="checkOrientation" class="form-check-input" id="inputCheckOrientation" v-model="options.checkOrientation">
 <label class="form-check-label" for="inputCheckOrientation">checkOrientation</label>
 </div>
 </fieldset>
 <div class="form-group row">
 <label for="inputMaxWidth" class="col-sm-5 col-form-label">maxWidth</label>
 <div class="col-sm-7">
 <input type="number" name="maxWidth" class="form-control" id="inputMaxWidth" placeholder="Infinity" v-model.number="options.maxWidth">
 </div>
 </div>
 <div class="form-group row">
 <label for="inputMaxHeight" class="col-sm-5 col-form-label">maxHeight</label>
 <div class="col-sm-7">
 <input type="number" name="maxHeight" class="form-control" id="inputMaxHeight" placeholder="Infinity" v-model.number="options.maxHeight">
 </div>
 </div>
 <div class="form-group row">
 <label for="inputMinWidth" class="col-sm-5 col-form-label">minWidth</label>
 <div class="col-sm-7">
 <input type="number" name="minWidth" class="form-control" id="inputMinWidth" placeholder="0" v-model.number="options.minWidth">
 </div>
 </div>
 <div class="form-group row">
 <label for="inputMinHeight" class="col-sm-5 col-form-label">minHeight</label>
 <div class="col-sm-7">
 <input type="number" name="minHeight" class="form-control" id="inputMinHeight" placeholder="0" v-model.number="options.minHeight">
 </div>
 </div>
 <div class="form-group row">
 <label for="inputWidth" class="col-sm-5 col-form-label">width</label>
 <div class="col-sm-7">
 <input type="number" name="width" class="form-control" id="inputWidth" placeholder="undefined" v-model.number="options.width">
 </div>
 </div>
 <div class="form-group row">
 <label for="inputHeight" class="col-sm-5 col-form-label">height</label>
 <div class="col-sm-7">
 <input type="number" name="height" class="form-control" id="inputHeight" placeholder="undefined" v-model.number="options.height">
 </div>
 </div>
 <div class="form-group row">
 <label for="inputQuality" class="col-sm-5 col-form-label">quality</label>
 <div class="col-sm-7">
 <select class="form-control" name="quality" id="inputQuality" v-model.number="options.quality">
 <option value="0">0</option>
 <option value="0.1">0.1</option>
 <option value="0.2">0.2</option>
 <option value="0.3">0.3</option>
 <option value="0.4">0.4</option>
 <option value="0.5">0.5</option>
 <option value="0.6">0.6</option>
 <option value="0.7">0.7</option>
 <option value="0.8">0.8</option>
 <option value="0.9">0.9</option>
 <option value="1">1</option>
 <option value="">NaN</option>
 </select>
 </div>
 </div>
 <div class="form-group row">
 <label for="inputMimeType" class="col-sm-5 col-form-label">mimeType</label>
 <div class="col-sm-7">
 <input type="text" name="mimeType" class="form-control" id="inputMimeType" placeholder="auto" v-model.number="options.mimeType">
 </div>
 </div>
 <div class="form-group row mb-0">
 <label for="inputConvertSize" class="col-sm-5 col-form-label">convertSize</label>
 <div class="col-sm-7">
 <input type="number" name="convertSize" class="form-control" id="inputConvertSize" placeholder="5000000" v-model.number="options.convertSize">
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="col-lg-8 mb-4">
 <div class="card mb-4">
 <div class="card-body">
 <h3 class="card-title">Input (original)</h3>
 <hr>
 <div class="row">
 <div class="col-md-4 d-flex">
 <div class="w-100 text-center" v-if="inputURL">
 <img class="mw-100" :src="inputURL" :alt="input.name">
 </div>
 <div v-else class="w-100 bg-light"></div>
 </div>
 <div class="col-md-8">
 <dl class="row">
 <dt class="col-sm-5">lastModified:</dt>
 <dd class="col-sm-7">{{ input.lastModified || 'N/A' }}</dd>
 <dt class="col-sm-5">lastModifiedDate:</dt>
 <dd class="col-sm-7">{{ input.lastModifiedDate || 'N/A' }}</dd>
 <dt class="col-sm-5">name:</dt>
 <dd class="col-sm-7">{{ input.name || 'N/A' }}</dd>
 <dt class="col-sm-5">type:</dt>
 <dd class="col-sm-7">{{ input.type || 'N/A' }}</dd>
 <dt class="col-sm-5">size:</dt>
 <dd class="col-sm-7">{{ input.size | prettySize }}</dd>
 </dl>
 </div>
 </div>
 </div>
 </div>
 <div class="card">
 <div class="card-body">
 <h3 class="card-title">Output (compressed)</h3>
 <hr>
 <div class="row">
 <div class="col-md-4 d-flex justify-content-center">
 <div class="w-100 text-center" v-if="outputURL">
 <img class="mw-100" :src="outputURL" :alt="output.name">
 <div class="mt-2">
 <a class="btn btn-sm btn-blocks btn-outline-primary mt-2" :download="output.name" :href="outputURL" title="Download the compressed image">Download</a>
 </div>
 </div>
 <div v-else class="w-100 bg-light"></div>
 </div>
 <div class="col-md-8">
 <dl class="row">
 <dt class="col-sm-5">lastModified:</dt>
 <dd class="col-sm-7">{{ output.lastModified || 'N/A' }}</dd>
 <dt class="col-sm-5">lastModifiedDate:</dt>
 <dd class="col-sm-7">{{ output.lastModifiedDate || 'N/A' }}</dd>
 <dt class="col-sm-5">name:</dt>
 <dd class="col-sm-7">{{ output.name || 'N/A' }}</dd>
 <dt class="col-sm-5">type:</dt>
 <dd class="col-sm-7">{{ output.type || 'N/A' }}</dd>
 <dt class="col-sm-5">size:</dt>
 <dd class="col-sm-7">{{ output.size | prettySize }}
 <span v-if="output.size">({{ ((1 - (output.size / input.size)) * 100).toFixed(2) }}% off)</span>
 </dd>
 </dl>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

new Vue({
 el: '#app',

data: function () {
 var vm = this;

return {
 options: {
 checkOrientation: true,
 maxWidth: undefined,
 maxHeight: undefined,
 minWidth: 0,
 minHeight: 0,
 width: undefined,
 height: undefined,
 quality: 0.8,
 mimeType: '',
 convertSize: 5000000,
 success: function (file) {
 console.log('Output: ', file);

if (URL) {
 vm.outputURL = URL.createObjectURL(file);
 }

vm.output = file;
 vm.$refs.input.value = '';
 },
 error: function (e) {
 window.alert(e.message);
 },
 },
 inputURL: '',
 outputURL: '',
 input: {},
 output: {},
 };
 },

filters: {
 prettySize: function (size) {
 var kilobyte = 1024;
 var megabyte = kilobyte * kilobyte;

if (size > megabyte) {
 return (size / megabyte).toFixed(2) + ' MB';
 } else if (size > kilobyte) {
 return (size / kilobyte).toFixed(2) + ' KB';
 } else if (size >= 0) {
 return size + ' B';
 }

return 'N/A';
 },
 },

methods: {
 compress: function (file) {
 if (!file) {
 return;
 }

console.log('Input: ', file);

if (URL) {
 this.inputURL = URL.createObjectURL(file);
 }

this.input = file;
 new ImageCompressor(file, this.options);
 },

change: function (e) {
 this.compress(e.target.files ? e.target.files[0] : null);
 },

dragover: function(e) {
 e.preventDefault();
 },

drop: function(e) {
 e.preventDefault();
 this.compress(e.dataTransfer.files ? e.dataTransfer.files[0] : null);
 },
 },
 });
});
</script>

BootstrapTema

Image Compressor

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0