图片压缩上传/加载方案

一、图片压缩上传方案

压缩图片基本流程

• input 读取到 文件 ，使用 FileReader 将其转换为 base64 编码
• 新建 img ，使其 src 指向刚刚的 base64
• 新建 canvas ，将 img 画到 canvas 上
• 利用 canvas.toDataURL/toBlob 将 canvas 导出为 base64 或 Blob
• 将 base64 或 Blob 转化为 File

将这些步骤逐个拆解，我们会发现似乎在canvas.toDataURL时涉及到图片质量，那咱们就从这里下手。

关键知识点

HTMLCanvasElement.toDataURL()

MDN： HTMLCanvasElement.toDataURL()

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

• 如果画布的高度或宽度是0，那么会返回字符串“data:,”。
• 如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
• Chrome支持“image/webp”类型。

语法

参数

• type 可选

图片格式，默认为 image/png

• encoderOptions 可选

在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

返回值

包含 data URI 的DOMString。

方法应用

二、图片高性能加载方案

从高清晰度、高压缩比、小体积的诉求出发，最终选择了使用 WebP 作为首选图片文件格式。

为什么选webp

WebP 是 Google 研发的具有先进有损无损压缩算法的图片格式，主要的特点有：高压缩率、支持透明通道、支持动图。据 WebP 官网的描述，在图片质量等同的条件下，WebP 无损压缩后的图片文件大小比对应的 PNG 图片小 26%，有损压缩图片比对应 JPEG 图片小 25～34%。

无损 WebP 也支持透明度。而在可接受有损 RGB 压缩的情况下，有损 WebP 也支持透明度，通常 PNG 文件大小比它大三倍。

Google 报告称，把动画 GIF 文件转换为有损 WebP 后文件大小减少了 64%，转换为无损 WebP 后文件大小减少了 19%。

WebP 文件格式是一种基于 RIFF（资源互换文件格式(resource interchange file format)）的文档格式。

使用 WebP 对图片进行有损压缩，在默认配置 75% 的压缩比下，可以将 PNG 图片大小压缩至原图体积的 13% 左右，JPG 图片甚至可以压缩至原图体积的 10% 左右（可参考官方测试页面)，实际效果显著。

webp方案使用

• 判断宿主环境是否支持WebP

JavaScript检测是否支持WebP代码如下：（出自Google官方文档）

function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

• 生成webp格式图片

NODE生成：调用图片转化库生成对应的webp图片 or 利用webpack对应loader生成 前端转码处理生成

• CSS背景图引入webp

设置根节点webpa类来处理css中图片引入问题

• html中图片如何引入

JS判断动态改变图片URL

本文主要参考
前端图片最优化压缩方案
基于 WebP 的图片高性能加载方案