1、图片种类

JPEG/JPG PNG SVG Base64 WebP
有损压缩、体积小、加载快、不支持透明 无损压缩、质量高、体积大、支持透明 文本文件、体积小、不失真、兼容性好
文本文件、依赖编码、小图标解决方案 像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片
JPG 图片经常作为大的背景图、轮播图或 Banner 图出现 要用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等 Logo 非常小的 Logo 兼容性

2、图片属性

object-fit: 指定可替换元素(img | video | iframe | embed )的内容对象在元素盒区域中的填充方式
object-fit: fill | contain | cover | none | scale-down

fill contain cover none scale-down
对象完全填充内容框 对象保持宽高比 对象在保持宽高比的同时填充内容框 对象保持原有的尺寸 取 none 或 contain 中尺寸小的
对象可能被裁剪以适应内容框 对象可能被缩放 对象可能被裁剪以适应内容框

object-position: 指定可替换元素的内容对象在元素盒区域中的位置

3、图片下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 本地下载图片
export function downloadImg(imgUrl: string, imgTitle: string) {
  var img = new Image();
  img.onload = function () {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx: any = canvas.getContext("2d");
    // 将img中的内容画到画布上
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    // 将画布内容转换为Blob
    canvas.toBlob((blob) => {
      // blob转为同源url
      var blobUrl = window.URL.createObjectURL(blob);
      // 创建a链接
      var a = document.createElement("a");
      a.href = blobUrl;
      a.download = imgTitle || "店铺营销工具"; // 设置图片名称
      // 触发a链接点击事件，浏览器开始下载文件
      a.click();
    });
  };
  img.src = imgUrl;
  // 必须设置，否则canvas中的内容无法转换为blob
  img.setAttribute("crossOrigin", "Anonymous");
}

4、截取图片

参考：
html2canvas: http://html2canvas.hertzen.com/
canvas2image: https://github.com/hongru/canvas2image

5、图片上传

参考 https://www.yuque.com/wuyanbin/blog/omrzog

1
<input type="file" accept={this.state.inputAccept} onChange={this.uploadImg} />

base 64

1
2
3
4
5
6
7
8
9
10
uploadImg = (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  //将本地图片转为base 64
  reader.readAsDataURL(file);
  reader.onload = (e) => {
    // 图片的base64
    console.log(e.target.result);
  };
};

FormData

1
2
3
4
5
6
7
8
9
10
11
uploadImg = (event) => {
  const file = event.target.files[0];
  let formData = new FormData();
  formData.append("file", file);
  formData.append("key", key); // 随机key
  formData.append("token", token); //上传七牛云的token
  axios.post("xxx", formData, (res) => {
    //上传成功后的结果，包括上传图片后图片的路径
    console.log(res);
  });
};

6、将 base64 图片转化为 formData 并上传

1
2
3
4
5
6
7
8
9
10
11
12
export async function transferBase64ToImg(base64String: any) {
  var bytes = window.atob(base64String.split(",")[1]);
  var array = [];
  for (var i = 0; i < bytes.length; i++) {
    array.push(bytes.charCodeAt(i));
  }
  var blob = new Blob([new Uint8Array(array)], { type: "image/jpeg" });
  var formData = new FormData();
  formData.append("file", blob, Date.now() + ".jpg");
  let res = await API.edit.uploadImage(formData);
  return res.fullPath;
}

7、图片懒加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// HTML
<img data-src="xxx">
<img data-src="xxx">
<img data-src="xxx">

// JS
let viewHeight = document.innerHeight || document.documentElement.clientHeight;
let num = 0;
let imgs = document.getElementByTagName('img');
function lazyLoad(){
  for(let i=num; i<imgs.length;i++){
    let distance = viewHeight - imgs[i].getBoundingClientRect().top;
    if(distance >=0){
      imgs[i].src = imgs[i].getAttribute('data-src');
    }
    nums = i+1;
  }
}
window.addEventListener('scroll', lazyLoad, false)