React JavaScript 压缩base64图片

import React from 'react';

export default class Compress extends React.Component {
  state = {
    originUrl: '',
    compressUrl: ''
  };

  // 获取base64图片大小
  getBase64Size = (base64) => {
    // 去掉base64编码中的前缀 data:image/jpeg;base64,
    // 去掉base64编码中的=号
    base64 = base64.replace('data:image/jpeg;base64,', '');
    base64 = base64.replace('=', '');

    const base64Length = base64.length;
    const byteLength = Math.floor(base64Length - (base64Length / 8) * 2); // 字节长度
    const size = (byteLength / 1024).toFixed(2);                          // 由字节转换为KB

    return size;
  };

  changeFile = (event) => {
    let _this = this;

    // 选择的文件对象(file里只包含图片的体积，不包含图片的尺寸)
    const file = event.target.files[0];

    // 选择的文件是图片
    if (file.type.indexOf('image') === 0) {
      // 压缩图片需要的一些元素和对象
      const reader = new FileReader();
      // 创建一个img对象
      const img = new Image();

      reader.readAsDataURL(file);
      // 文件base64化，以便获知图片原始尺寸
      reader.onload = function(e) {
        img.src = e.target.result;

        _this.setState({
          originUrl: e.target.result
        });

        console.log(`原始大小  ${_this.getBase64Size(e.target.result)}`);
      };

      // base64地址图片加载完毕后执行
      img.onload = function() {
        // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        // 图片原始尺寸
        const originWidth = this.width;
        const originHeight = this.height;

        // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
        const maxWidth = 300;
        const maxHeight = 300;

        // 目标尺寸
        let targetWidth = originWidth;
        let targetHeight = originHeight;

        // 图片尺寸超过300x300的限制
        if (originWidth > maxWidth || originHeight > maxHeight) {
          if (originWidth / originHeight > maxWidth / maxHeight) {
            // 更宽，按照宽度限定尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
          } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
          }
        }
        // canvas对图片进行缩放
        canvas.width = targetWidth;
        canvas.height = targetHeight;

        // 清除画布
        context.clearRect(0, 0, targetWidth, targetHeight);

        /**
         * 图片压缩
         * context.drawImage(img, 0, 0, targetWidth, targetHeight)
         * 第一个参数是创建的img对象
         * 第二三个参数是左上角坐标
         * 后面两个是画布区域宽高
         * */
        context.drawImage(img, 0, 0, targetWidth, targetHeight);

        /**
         * 压缩后的图片转base64
         * canvas.toDataURL(mimeType, qualityArgument)
         * mimeType 默认值是'image/png'
         * qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92
         * */
        const newUrl = canvas.toDataURL('image/jpeg', 1);

        _this.setState({
          compressUrl: newUrl
        });

        console.log(`压缩大小 ${_this.getBase64Size(newUrl)}`);

        // 也可以把压缩后的图片转blob格式用于上传
        // canvas.toBlob((blob)=>{
        //     console.log(blob)
        //     //把blob作为参数传给后端
        // }, 'image/jpeg', 0.92)
      };
    } else {
      alert('请上传图片格式');
    }
  };

  render() {
    const { originUrl, compressUrl } = this.state;

    return (
      <div style={{ marginBottom: 100 }}>
        <input id="file" type="file" onChange={this.changeFile} />

        <img src={originUrl} alt="" />
        <img src={compressUrl} alt="" />
      </div>
    );
  }
}

最后

以上就是鲜艳大象为你收集整理的React JavaScript 压缩base64图片的全部内容，希望文章能够帮你解决React JavaScript 压缩base64图片所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。