js jpg图片压缩器

js image resizer / compressor

js, image, compress

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1274
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const MAX_WIDTH = 320;
const MAX_HEIGHT = 180;
const MIME_TYPE = "image/jpeg";
const QUALITY = 0.7;

function calculateSize(img, maxWidth, maxHeight) {
  let width = img.width;
  let height = img.height;

// calculate the width and height, constraining the proportions
  if (width > height) {
    if (width > maxWidth) {
      height = Math.round((height * maxWidth) / width);
      width = maxWidth;
    }
  } else {
    if (height > maxHeight) {
      width = Math.round((width * maxHeight) / height);
      height = maxHeight;
    }
  }
  return [width, height];
}

// Utility functions for demo purpose

function displayInfo(label, file) {
  const p = document.createElement('p');
  p.innerText = `${label} - ${readableBytes(file.size)}`;
  document.getElementById('root').append(p);
}

function readableBytes(bytes) {
  const i = Math.floor(Math.log(bytes) / Math.log(1024)),
    sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
}

编译

CSS

HTML

js image resizer / compressor

js, image, compress

编辑器支持Emmet

快捷键

js image resizer / compressor

js, image, compress

p5.js 树形生成器

WebGL Three.js带图像变形动画特效的幻灯片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：