移动端图片上传旋转、压缩问题的方法

移动端图片上传旋转、压缩问题主要是由于不同设备系统、不同拍照APP对图片方向及分辨率的处理方式不同所导致的，而这些问题会影响用户的使用体验和图片加载速度，因此需要进行解决。

以下是解决移动端图片上传旋转、压缩的方法攻略：

1. 旋转问题解决

1.1 问题描述

在部分设备上，拍照得到的图片可能会因为设备方向改变而旋转90度或180度。例如，在iOS系统中，通过原生api拍摄的图片，在Safari浏览器中预览时会自动根据设备方向旋转展示。

1.2 解决方案

解决旋转问题的原理是判断图片的方向，并对图片进行相应的旋转操作。实现旋转处理的解决方案有多种，可以使用JS、canvas等技术实现。

以下是通过canvas实现图片旋转的详细示例：

// 旋转图片函数
function rotateImg(sourceImg, orientation, callback) {
    const img = new Image();

    img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        canvas.width = orientation > 4 ? img.height : img.width;
        canvas.height = orientation > 4 ? img.width : img.height;
        if ([5, 6, 7, 8].indexOf(orientation) > -1) {
            ctx.translate(canvas.width / 2, canvas.height / 2);
            ctx.rotate((orientation - 4) * Math.PI / 2);
            ctx.drawImage(img, -img.height / 2, -img.width / 2, img.height, img.width);
        }
        else {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        }
        callback(canvas.toDataURL(sourceImg.type));
    }
    img.src = sourceImg.src;
}

其中，sourceImg参数为源图片，orientation参数为图片方向，callback参数为处理后的图片回调函数。

2. 压缩问题解决

2.1 问题描述

在移动端上传图片时，大尺寸高分辨率的图片会导致上传速度过慢、占用用户流量等问题，因此需要对图片进行压缩操作以缩小图片体积。

2.2 解决方案

常见的图片压缩方案有两种：前端压缩和服务器端压缩。其中，前端压缩指使用JS或canvas等技术对图片进行压缩处理，而服务器端压缩则将图片上传到服务器后，由服务器进行压缩。

以下是通过canvas实现前端图片压缩的详细示例：

// 压缩图片函数
function compressImg(sourceImg, targetSize, callback) {
    const img = new Image();

    img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        let targetWidth = img.width;
        let targetHeight = img.height;
        const maxWH = Math.max(targetWidth, targetHeight);

        if (maxWH > targetSize) {
            const scale = targetSize / maxWH;
            targetWidth = img.width * scale;
            targetHeight = img.height * scale;
        }

        canvas.width = targetWidth;
        canvas.height = targetHeight;

        ctx.drawImage(img, 0, 0, targetWidth, targetHeight);

        // 将压缩后的图片转换为base64编码
        const dataURL = canvas.toDataURL(sourceImg.type);

        callback(dataURL);
    }
    img.src = sourceImg.src;
}

其中，sourceImg参数为源图片，targetSize参数为目标大小，callback参数为压缩后的图片回调函数。

3.完整攻略总结

通过以上两个示例可以看出，解决移动端图片上传旋转、压缩问题需要使用JS和canvas等前端技术实现，通过判断图片的方向，采用相应的角度进行旋转操作，通过压缩图片的大小来避免上传过大的原图，从而提高用户使用体验和图片加载速度。同时，也需要对不同设备、不同拍照APP的差异性进行充分的调研和处理。