如何在Dropzone.js上传图片前移除EXIF数据以规避AWS WAF拦截

实现原理 #

通过浏览器Canvas API重绘图片，重绘生成的新图片会自动剥离所有原始EXIF信息，再将处理后的文件替换Dropzone的待上传文件即可。

具体实现代码 #

直接在你原有的Dropzone初始化配置中新增transformFile钩子即可，修改后完整代码如下：

var myDropzone = new Dropzone("div#dZUpload", { 
    url: "{{ route('image.upload', $id) }} ",
    method: "post",
    autoProcessQueue: true,
    resizeWidth: 1920,
    resizeHeight: 1080,
    parallelUploads: 1,
    // 新增上传前文件转换逻辑
    transformFile: function(file, done) {
        // 仅处理图片类型文件
        if (!file.type.match(/image.*/)) {
            done(file);
            return;
        }
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = new Image();
            img.onload = function() {
                // 创建canvas重绘图片
                const canvas = document.createElement('canvas');
                // 可直接在此处替换为你需要的1920*1080尺寸实现缩放，无需依赖Dropzone自带resize参数
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);
                // 转成Blob替换原文件，可根据需求调整图片格式和质量
                // 保留PNG透明通道，其余格式默认转JPEG
                const outputType = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
                canvas.toBlob(function(blob) {
                    // 保留原始文件名
                    const newFile = new File([blob], file.name, {
                        type: outputType,
                        lastModified: Date.now()
                    });
                    done(newFile);
                }, outputType, 0.9); // 0.9为JPEG质量参数，取值0-1，可按需调整
            }
            img.src = e.target.result;
        }
        reader.readAsDataURL(file);
    }
});

注意事项 #

• 如果需要保留EXIF中的旋转信息，可在重绘前读取EXIF旋转参数，调整canvas绘制角度即可
• 处理后的图片不会携带任何原始EXIF字段，可完全避免AWS WAF的SQL特征检测拦截

内容的提问来源于stack exchange，提问作者Damian Vitale