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

灰太狼 2022-04-16 06:42 197阅读 0赞

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

*   *  选中之后裁剪
     *  base64图片转blob

npm 上面搜索会出来两个版本  
**react-cropper2**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]  
**react-cropper**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 1]

## 选中之后裁剪 ##

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

## base64图片转blob ##

参考链接记录

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]: /images/20220416/30f9bf2673b247cfa699de32d227f06f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 1]: /images/20220416/aaea781f08bb475c9b79a424db691466.png
[canvas drawImage api]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
[github]: https://github.com/roadmanfong/react-cropper
[JavaScript image cropper]: https://github.com/fengyuanchen/cropperjs
[githubpage show]: http://roadmanfong.github.io/react-cropper/