HTML图片下载时出现‘非安全连接加载’错误：原因及修复方法

错误原因（结合常见触发场景） #

• 无效的base64内容：传入的contentBase64可能包含空格、换行符等非base64合法字符，或者本身不是正确的base64编码内容
• MIME类型不匹配：代码中硬编码为image/png，如果实际要下载的图片是JPG、WebP等其他格式，会导致浏览器解析data URI失败
• DOM元素未清理：创建的<a>标签一直留在页面中，可能引发重复操作异常或内存占用问题
• data URI长度超限：部分浏览器对data URI的长度有阈值，过大的base64内容会触发下载失败

修复后的基础版代码 #

function downloadBase64File(contentBase64, fileName) {
    // 清理base64中的无效空白字符
    const cleanedBase64 = contentBase64.replace(/\s/g, '');
    // 根据文件名后缀自动匹配对应MIME类型
    const ext = fileName.split('.').pop().toLowerCase();
    const mimeTypes = {
        png: 'image/png',
        jpg: 'image/jpeg',
        jpeg: 'image/jpeg',
        webp: 'image/webp',
        gif: 'image/gif'
    };
    const mimeType = mimeTypes[ext] || 'image/png';
    
    const linkSource = `data:${mimeType};base64,${cleanedBase64}`;
    const downloadLink = document.createElement('a');
    
    downloadLink.href = linkSource;
    downloadLink.download = fileName;
    downloadLink.click();
    
    // 立即移除DOM中的临时链接，避免内存泄漏
    document.body.removeChild(downloadLink);
}

超大图片的替代方案（规避data URI长度限制） #

如果是大尺寸图片，建议改用Blob URL替代data URI，避免浏览器的长度阈值限制：

function downloadBlobImage(contentBase64, fileName) {
    const cleanedBase64 = contentBase64.replace(/\s/g, '');
    const ext = fileName.split('.').pop().toLowerCase();
    const mimeTypes = {
        png: 'image/png',
        jpg: 'image/jpeg',
        jpeg: 'image/jpeg',
        webp: 'image/webp',
        gif: 'image/gif'
    };
    const mimeType = mimeTypes[ext] || 'image/png';
    
    // 将base64转换为Blob对象
    const byteCharacters = atob(cleanedBase64);
    const byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += 512) {
        const slice = byteCharacters.slice(offset, offset + 512);
        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    const blob = new Blob(byteArrays, {type: mimeType});
    const url = URL.createObjectURL(blob);
    
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = fileName;
    downloadLink.click();
    
    // 释放Blob URL资源，避免内存泄漏
    URL.revokeObjectURL(url);
    document.body.removeChild(downloadLink);
}

额外注意事项 #

• 确保传入的contentBase64是纯编码内容，不要包含data:image/xxx;base64,前缀
• 跨域场景下生成的图片，要确保资源允许跨域访问，否则会出现画布污染无法生成有效base64的问题

内容的提问来源于stack exchange，提问作者상욱이