js 选中图片某一区域的一种解决方案

npm 上面搜索会出来两个版本
react-cropper2

react-cropper

选中之后裁剪

使用canvas drawImage api
把裁剪之后图片转成base64格式

base64图片转blob

function base64ToBlob(urlData, type) {
    let arr = urlData.split(',');
    let mime = arr[0].match(/:(.*?);/)[1] || type;
    // 去掉url的头，并转化为byte
    let bytes = window.atob(arr[1]);
    // 处理异常,将ascii码小于0的转换为大于0
    let ab = new ArrayBuffer(bytes.length);
    // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
    let ia = new Uint8Array(ab);
    for (let i = 0; i < bytes.length; i++) {
      ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {
      type: mime
    });
 }

参考链接记录

1. github地址 784 star
2. JavaScript image cropper
3. githubpage show 地址

想写点什么，发现文档挺全的，持续更新中。。。