# JavaScript图片压缩

**Repository Path**: battleforg/javascript_picture_compression

## Basic Information

- **Project Name**: JavaScript图片压缩
- **Description**: 处理input上传的图片DataURL 处理进行分辨率和质量压缩，返回DataURL
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-07-18
- **Last Updated**: 2022-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JavaScript图片压缩

#### 项目介绍
处理input上传的图片DataURL 处理进行分辨率和质量压缩，返回DataURL


#### 基本思路

1. 通过DataURL创建img对象
2. 把img置入canvas
3. 修改分辨率和质量
4. 返回以DataURL为参数的回调函数


```
/**
 * 
 * @param {*dataURL} url 
 * @param {*压缩后的目标宽度} finWidth 
 * @param {*压缩后的目标质量} quality 
 * @param {*回调函数} reData 
 */
function compressImg(url, finWidth, quality, reData) {

  // 创建一个img对象
  var img = new Image()
  img.url = url
  // 定义压缩后的长宽
  var targetWidth,
    targetHeight;
  // 定义canvas画布    
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d')

  // 等待img加载
  img.onload = function () {
    // 先初始化目标大小
    targetWidth = this.width
    targetHeight = this.height
    // 以参数宽为大致目标进行压缩
    while (targetWidth > finWidth) {
      targetWidth = targetWidth * 0.9
      targetHeight = targetHeight * 0.9
    }
    // 初始化canvas区域大小
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    // 清除画布
    context.clearRect(0, 0, targetWidth, targetHeight);
    // 把图片画在定义好的2D环境里
    context.drawImage(img, 0, 0, targetWidth, targetHeight);
    // 转化成DataURL返回
    var base64 = canvas.toDataURL('image/jpeg', quality);
    // img.onload是一个异步函数，不使用回调函数 由于程序执行顺序，返回值无法获取
    reData(base64)
  } 
}
```
#### 检验图片压缩后的效果

##### 先定义一个函数 转换DataURL到File对象
```
            function convertBase64UrlToBlob(urlData) {
              var arr = urlData.split(','),
                  mime = arr[0].match(/:(.*?);/)[1],
                  bstr = atob(arr[1]),
                  n = bstr.length,
                  u8arr = new Uint8Array(n);
                while (n--) {
                  u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], {
                  type: mime
                });
              }
```

```
var data = compressImg(url, 1024, 0.8)
var file = convertBase64UrlToBlob(data)
console.log(file.size)
```