merchapp/java-mall-app-shop-admin/utils/tupian.js

/**
 *  imageUtil.js
 *解决图片旋转的问题
 * **/

import EXIF from "./exif.js";

async function compressImage(path) {
  let imageInfo = await getImageInfo(path);
  let systemInfo = await getSystemInfo();
  return new Promise(function (resolve, reject) {
    // #ifdef APP-PLUS || APP-NVUE
    appCompressImage(path, imageInfo)
      .then((res) => {
        resolve(res);
      })
      .catch((e) => {
        reject(e);
      });
    // #endif

    // #ifdef H5
    let orientation = 1;
    let img = document.createElement("img");
    img.src = path;
    img.onload = function () {
      EXIF.getData(img, function () {
        orientation = EXIF.getTag(this, "Orientation");
        canvasImg(path, orientation, imageInfo, systemInfo)
          .then((res) => {
            debugger;
            resolve(res);
          })
          .catch((e) => {
            reject(e);
          });
      });
    };
    img.onerror = function () {
      reject(path);
    };
    // #endif
  });
}

// app处理旋转图片
function appCompressImage(src, imageInfo) {
  return new Promise(function (resolve, reject) {
    let orientation = imageInfo.orientation;
    let rotate = 0;
    let quality = 80;
    if (plus.os.name == "iOS") {
      rotate = 0;
      quality = 25;
    } else {
      switch (orientation) {
        case "up": //exif:1 不旋转
          rotate = 0;
          break;
        case "down": //exif:3 旋转180度
          rotate = 180;
          break;
        case "right": //exif:6 旋转90度
          rotate = 90;
          break;
        case "left": //exif:8 旋转270度
          rotate = 270;
          break;
        default:
          rotate = 0;
          break;
      }
    }

    plus.zip.compressImage(
      {
        src: src,
        dst:
          "_doc/uniapp_temp" + "/compressed/" + Math.round(new Date()) + ".png",
        format: "png",
        quality: quality,
        width: "auto",
        height: "auto",
        rotate: rotate,
      },
      function (event) {
        resolve(event.target);
      },
      function (error) {
        reject(src);
      }
    );
  });
}

// 画图片
function canvasImg(path, or, imageInfo, systemInfo) {
  return new Promise(function (resolve, reject) {
    let canvasId = "uploadCanvas";
    const ctx = uni.createCanvasContext(canvasId);
    let scale = imageInfo.width / imageInfo.height;

    // 图片参数 start
    let maxdestWidth = 1100; // 2000;
    let destWidth = imageInfo.width;
    let destHeight = imageInfo.height;

    let destCompressWidth = imageInfo.width;
    let destCompressHeight = imageInfo.height;

    // 压缩图片 最大不超过5M  1200
    // 当宽大于高的时候
    if (imageInfo.width > imageInfo.height) {
      if (imageInfo.width > maxdestWidth) {
        destCompressWidth = maxdestWidth;
        destCompressHeight = Math.floor(destCompressWidth / scale);
      } else {
        destCompressWidth = (imageInfo.width * 8) / 10;
        destCompressHeight = Math.floor(destCompressWidth / scale);
      }
    }
    // 当高大于宽
    else {
      if (imageInfo.height > maxdestWidth) {
        destCompressHeight = maxdestWidth;
        destCompressWidth = Math.floor(destCompressHeight * scale);
      } else {
        destCompressHeight = imageInfo.height * 0.8;
        destCompressWidth = Math.floor(destCompressHeight * scale);
      }
    }

    destWidth = destCompressHeight;
    destHeight = destCompressWidth;
    // 图片参数 end

    // 画布参数 start
    let maxWidth = 300;
    let canvasW = imageInfo.width;
    let canvasH = imageInfo.height;

    let width = imageInfo.width;
    let height = imageInfo.height;

    // canvas画布不能超过最大宽
    if (canvasW > maxWidth) {
      canvasW = maxWidth;
      canvasH = Math.floor(canvasW / scale);
    }

    width = canvasW;
    height = canvasH;
    // 画布参数 end

    // console.log('--or---', or)
    //单独处理苹果最新版本
    if (
      systemInfo.model == "iPhone" &&
      systemInfo.system.indexOf("13.4.1") > -1
    ) {
      ctx.drawImage(path, 0, 0, canvasW, canvasH);
      destWidth = destCompressWidth;
      destHeight = destCompressHeight;
    } else {
      if (or == 6) {
        //逆时针旋转了90
        ctx.translate(width, 0);
        ctx.rotate(Math.PI / 2);
        ctx.drawImage(path, 0, 0, canvasH, canvasW);
      } else if (or == 3) {
        //逆时针旋转了180
        ctx.translate(width, height);
        ctx.rotate(Math.PI);
        ctx.drawImage(path, 0, 0, canvasH, canvasW);
      } else if (or == 8) {
        //顺时针旋转90
        ctx.translate(0, height);
        ctx.rotate(-Math.PI / 2);
        ctx.drawImage(path, 0, 0, canvasH, canvasW);
      } else {
        ctx.drawImage(path, 0, 0, canvasW, canvasH);
        // return resolve(path);

        destWidth = destCompressWidth;
        destHeight = destCompressHeight;
      }
    }
    // console.log('图片原始长宽', imageInfo, maxWidth, canvasW, canvasH, width, height, destWidth, destHeight);

    ctx.draw(
      true,
      setTimeout(() => {
        uni.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: width, //画布宽度
          height: height,
          destWidth: destWidth,
          destHeight: destHeight,
          fileType: "png",
          canvasId: canvasId,
          success: (res) => {
            resolve(res.tempFilePath);
          },
          fail: (err) => {
            resolve(path);
          },
        });
      }, 200)
    );
  });
}

// 获取图片信息
function getImageInfo(path) {
  return new Promise(function (resolve, reject) {
    // #ifdef APP-PLUS
    plus.io.getImageInfo({
      src: path,
      success: function (image) {
        // console.log('orientation=' + image.orientation);
        resolve(image);
      },
      fail: function (err) {
        console.log("getImageInfoErr: " + JSON.stringify(err));
        reject(err);
      },
    });
    // #endif

    // #ifdef H5 || MP-WEIXIN
    uni.getImageInfo({
      src: path,
      success: function (image) {
        // console.log('orientation=' + image.orientation);
        resolve(image);
      },
      fail: function (err) {
        console.log("getImageInfoErr: " + JSON.stringify(err));
        reject(err);
      },
    });
    // #endif
  });
}

// 获取系统信息
function getSystemInfo(path) {
  return new Promise(function (resolve, reject) {
    uni.getSystemInfo({
      success(res) {
        resolve(res);
      },
      fail(err) {
        console.log("getSystemInfoErr: " + JSON.stringify(err));
        reject(err);
      },
    });
  });
}

export default compressImage;