图片上传压缩校正

import Exif from ‘exif-js‘;
/* eslint-disable func-names */
function ImageProcess(file, callback) {
  let Orientation;
  // 去获取拍照时的信息，解决拍出来的照片旋转问题
  Exif.getData(file, function () {
    Orientation = Exif.getTag(this, ‘Orientation‘);
  });
  // console.log("Orientation", Orientation);
  // 看支持不支持FileReader
  if (!file || !window.FileReader) return;
  if (/^image/.test(file.type)) {
    // 创建一个reader
    const reader = new window.FileReader();
    // 将图片2将转成 base64 格式
    reader.readAsDataURL(file);
    // 读取成功后的回调
    reader.onloadend = function () {
      const img = new window.Image();
      img.src = this.result;
      img.onload = function () {
        // 压缩图片
        const data = ImageCompress(img, Orientation);
        // console.log(dataURItoBlob(data));
        callback(data);
      };
    };
  }
}
function ImageCompress(img, Orientation) {
  const canvas = document.createElement(‘canvas‘);
  const ctx = canvas.getContext(‘2d‘);
  // 瓦片canvas
  const tCanvas = document.createElement(‘canvas‘);
  const tctx = tCanvas.getContext(‘2d‘);
  let { width, height } = img;

  // 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
  let ratio = (width * height) / 4000000;
  if (ratio > 1) {
    ratio = Math.sqrt(ratio);
    width /= ratio;
    height /= ratio;
  } else {
    ratio = 1;
  }
  canvas.width = width;
  canvas.height = height;
  // 铺底色
  ctx.fillStyle = ‘#fff‘;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // 如果图片像素大于100万则使用瓦片绘制
  let count = (width * height) / 1000000;
  if (count > 1) {
    // 计算要分成多少块瓦片
    count = ~~(Math.sqrt(count) + 1);
    // 计算每块瓦片的宽和高
    const nw = ~~(width / count);
    const nh = ~~(height / count);
    tCanvas.width = nw;
    tCanvas.height = nh;
    for (let i = 0; i < count; i += 1) {
      for (let j = 0; j < count; j += 1) {
        tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
        ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
      }
    }
  } else {
    ctx.drawImage(img, 0, 0, width, height);
  }
  // 修复ios上传图片的时候 被旋转的问题
  if (Orientation && Orientation !== 1) {
    switch (Orientation) {
      case 6: // 需要顺时针（向左）90度旋转
        rotateImg(img, ‘left‘, canvas);
        break;
      case 8: // 需要逆时针（向右）90度旋转
        rotateImg(img, ‘right‘, canvas);
        break;
      case 3: // 需要180度旋转 转两次
        rotateImg(img, ‘right‘, canvas);
        rotateImg(img, ‘right‘, canvas);
        break;
      default: break;
    }
  }
  // 进行最小压缩
  const ndata = canvas.toDataURL(‘image/jpeg‘, 0.5);
  // 清除canvas画布的宽高
  tCanvas.width = 0;
  tCanvas.height = 0;
  canvas.width = 0;
  canvas.height = 0;
  // 打印压缩前后的大小，以及压缩比率
  // const initSize = img.src.length;
  // console.log(‘压缩前：‘ + initSize);
  // console.log(‘压缩后：‘ + ndata.length);
  // console.log(‘压缩率：‘ + ~~(100 * (initSize - ndata.length) / initSize) + "%");
  // console.log(ndata);
  return ndata;
}

function rotateImg(img, direction, cvs) {
  const canvas = cvs;
  // 最小与最大旋转方向，图片旋转4次后回到原方向
  const minStep = 0;
  const maxStep = 3;
  if (img == null) return;
  // img的高度和宽度不能在img元素隐藏后获取，否则会出错
  const { width, height } = img;
  let step = 2;
  if (step == null) {
    step = minStep;
  }
  if (direction === ‘right‘) {
    step += 1;
    // 旋转到原位置，即超过最大值
    if (step > maxStep) step = minStep;
  } else {
    step -= 1;
    if (step < minStep) step = maxStep;
  }
  // 旋转角度以弧度值为参数
  const degree = (step * 90 * Math.PI) / 180;
  const ctx = canvas.getContext(‘2d‘);
  switch (step) {
    case 0:
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0);
      break;
    case 1:
      canvas.width = height;
      canvas.height = width;
      ctx.rotate(degree);
      ctx.drawImage(img, 0, -height);
      break;
    case 2:
      canvas.width = width;
      canvas.height = height;
      ctx.rotate(degree);
      ctx.drawImage(img, -width, -height);
      break;
    case 3:
      canvas.width = height;
      canvas.height = width;
      ctx.rotate(degree);
      ctx.drawImage(img, -width, 0);
      break;
    default: break;
  }
}
function dataURItoBlob(dataURI) {
  const byteString = window.atob(dataURI.split(‘,‘)[1]);
  const mimeString = dataURI.split(‘,‘)[0].split(‘:‘)[1].split(‘;‘)[0];
  // const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i += 1) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new window.Blob([ia], { type: mimeString });
}
export default ImageProcess;

import Exif from ‘exif-js‘;

/* eslint-disable func-names */

function ImageProcess(file, callback) {

let Orientation;

// 去获取拍照时的信息，解决拍出来的照片旋转问题

Exif.getData(file, function () {

Orientation = Exif.getTag(this, ‘Orientation‘);

});

// console.log("Orientation", Orientation);

// 看支持不支持FileReader

if (!file || !window.FileReader) return;

if (/^image/.test(file.type)) {

// 创建一个reader

const reader = new window.FileReader();

// 将图片2将转成 base64 格式

reader.readAsDataURL(file);

// 读取成功后的回调

reader.onloadend = function () {

const img = new window.Image();

img.src = this.result;

img.onload = function () {

// 压缩图片

const data = ImageCompress(img, Orientation);

// console.log(dataURItoBlob(data));

callback(data);

};

};

}

}

function ImageCompress(img, Orientation) {

const canvas = document.createElement(‘canvas‘);

const ctx = canvas.getContext(‘2d‘);

// 瓦片canvas

const tCanvas = document.createElement(‘canvas‘);

const tctx = tCanvas.getContext(‘2d‘);

let { width, height } = img;

// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下

let ratio = (width * height) / 4000000;

if (ratio > 1) {

ratio = Math.sqrt(ratio);

width /= ratio;

height /= ratio;

} else {

ratio = 1;

}

canvas.width = width;

canvas.height = height;

// 铺底色

ctx.fillStyle = ‘#fff‘;

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 如果图片像素大于100万则使用瓦片绘制

let count = (width * height) / 1000000;

if (count > 1) {

// 计算要分成多少块瓦片

count = ~~(Math.sqrt(count) + 1);

// 计算每块瓦片的宽和高

const nw = ~~(width / count);

const nh = ~~(height / count);

tCanvas.width = nw;

tCanvas.height = nh;

for (let i = 0; i < count; i += 1) {

for (let j = 0; j < count; j += 1) {

tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);

ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);

}

}

} else {

ctx.drawImage(img, 0, 0, width, height);

}

// 修复ios上传图片的时候 被旋转的问题

if (Orientation && Orientation !== 1) {

switch (Orientation) {

case 6: // 需要顺时针（向左）90度旋转

rotateImg(img, ‘left‘, canvas);

break;

case 8: // 需要逆时针（向右）90度旋转

rotateImg(img, ‘right‘, canvas);

break;

case 3: // 需要180度旋转 转两次

rotateImg(img, ‘right‘, canvas);

rotateImg(img, ‘right‘, canvas);

break;

default: break;

}

}

// 进行最小压缩

const ndata = canvas.toDataURL(‘image/jpeg‘, 0.5);

// 清除canvas画布的宽高

tCanvas.width = 0;

tCanvas.height = 0;

canvas.width = 0;

canvas.height = 0;

// 打印压缩前后的大小，以及压缩比率

// const initSize = img.src.length;

// console.log(‘压缩前：‘ + initSize);

// console.log(‘压缩后：‘ + ndata.length);

// console.log(‘压缩率：‘ + ~~(100 * (initSize - ndata.length) / initSize) + "%");

// console.log(ndata);

return ndata;

}

function rotateImg(img, direction, cvs) {

const canvas = cvs;

// 最小与最大旋转方向，图片旋转4次后回到原方向

const minStep = 0;

const maxStep = 3;

if (img == null) return;

// img的高度和宽度不能在img元素隐藏后获取，否则会出错

const { width, height } = img;

let step = 2;

if (step == null) {

step = minStep;

}

if (direction === ‘right‘) {

step += 1;

// 旋转到原位置，即超过最大值

if (step > maxStep) step = minStep;

} else {

step -= 1;

if (step < minStep) step = maxStep;

}

// 旋转角度以弧度值为参数

const degree = (step * 90 * Math.PI) / 180;

const ctx = canvas.getContext(‘2d‘);

switch (step) {

case 0:

canvas.width = width;

canvas.height = height;

ctx.drawImage(img, 0, 0);

break;

case 1:

canvas.width = height;

canvas.height = width;

ctx.rotate(degree);

ctx.drawImage(img, 0, -height);

break;

case 2:

canvas.width = width;

canvas.height = height;

ctx.rotate(degree);

ctx.drawImage(img, -width, -height);

break;

case 3:

canvas.width = height;

canvas.height = width;

ctx.rotate(degree);

ctx.drawImage(img, -width, 0);

break;

default: break;

}

}

function dataURItoBlob(dataURI) {

const byteString = window.atob(dataURI.split(‘,‘)[1]);

const mimeString = dataURI.split(‘,‘)[0].split(‘:‘)[1].split(‘;‘)[0];

// const ab = new ArrayBuffer(byteString.length);

const ia = new Uint8Array(byteString.length);

for (let i = 0; i < byteString.length; i += 1) {

ia[i] = byteString.charCodeAt(i);

}

return new window.Blob([ia], { type: mimeString });

}

export default ImageProcess;

原文地址：https://www.cnblogs.com/shangyueyue/p/10094812.html

时间： 2024-10-14 20:03:47

图片上传压缩校正的相关文章

图片上传压缩 Thinkphp

图片上传压缩 待完成 import('ORG.Net.UploadFile'); $upload = new UploadFile(); $upload->maxSize = 4194304; $upload->allowExts = array('jpg', 'gif', 'png', 'jpeg'); $upload->savePath = 'Public/Mxun/vote/'; //略所图 $upload->thumb = true; $upload->thumbTy

Java图片上传压缩处理

所需要的jar包在:\jdk1.7.0_25\jre\lib\rt.jar里面 package util; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import javax.ima

图片上传压缩方法，测试过，失真度能接受

public Bitmap revitionImageSize(String path) throws IOException { BufferedInputStream in = new BufferedInputStream(new FileInputStream(new File(path))); BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = true; /

使用django + Pillow进行图片上传压缩格式保存时出错的处理

安装Pillow之前先安装好python-dev libzip-dev libjpeg8-dev libfreetype6-dev libpng12-dev 否则在用PIL(Pillow)进行上传图片压缩格式保存时会出错: encoder jpeg not available decoder zip not available sudo apt-get install python-dev libzip-dev libjpeg8-dev libfreetype6-dev libpng12-dev

图片上传压缩

<script type="text/javascript"> var img = { Imgsource: [], } $(function () { $(".addimg").click(function () { $("#uploadFile").click(); }); $('#uploadFile').localResizeIMG({ //width: 100, quality: 0.7, success: function

调用相机，选择图片上传，带预览功能、图片压缩、相机文字设置、

摘要 iOS调用相机,iOS调用相册,保存至应用程序沙盒,高保真压缩图片,并有点击放大预览,再次点击缩回至原大小,带动画效果,附源码下载地址. Xcode版本4.5.1 类库ios6.0 IOS调用相机 图片预览 图片上传 压缩图片 模拟器添加图片 目录[-] 判断是否支持相机,跳转到相机或相册界面 七.保存图片 高保真压缩图片方法 八.实现点击图片预览功能,滑动放大缩小,带动画 ps:模拟器添加图片 源码下载地址: 一.新建工程 二.拖控件,创建映射 三.在.h中加入delegate ? 1

移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 一翻google之后,发现了localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,再进行保存,先压缩后上传的目的就达到了. 处理过程 LocalResizeIM

spring mvc 图片上传,图片压缩、跨域解决、 按天生成目录 ,删除，限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成目录 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE be

【图片】移动端图片上传旋转、压缩的解决方案

移动端图片上传旋转.压缩的解决方案 来源 知乎    作者 林鑫 工作上有手机上传准考证等图片的功能,这个是非常必要的,作者写的很全面,就直接记录这个地址了 还有一篇 文件的上传.下载