作者:叫我师大神 | 来源:互联网 | 2023-09-16 11:33
最近在做一个上传头像然后保存显示的功能,因为涉及到裁剪大小和尺寸比例,所以直接上传图片再展示的话,就会出现问题,所以就想用canvas来渲染裁剪后的图片,然后转化成base64格式的图片再存储,这样取用的时候也比较方便。我写了一个demo来展示一下怎么把一张图片渲染成canvas图片,并转化为base64格式导出。<!DOCTYPEhtml&g
最近在做一个上传头像然后保存显示的功能,因为涉及到裁剪大小和尺寸比例,所以直接上传图片再展示的话,就会出现问题,所以就想用canvas来渲染裁剪后的图片,然后转化成base64格式的图片再存储,这样取用的时候也比较方便。
我写了一个demo来展示一下怎么把一张图片渲染成canvas图片,并转化为base64格式导出。
运行程序,查看控制台记录的base64格式图片:
![html中canvas渲染图片,并转化成base64格式保存 html中canvas渲染图片,并转化成base64格式保存](https://img1.php1.cn/3cd4a/24e5b/525/fcbc6cc059058c80.png)
如果要传到后台,就以字符串的形式保存就好了;取用的时候也是直接取字符串。
/****************************我是可爱的分割线*************************************/
![html中canvas渲染图片,并转化成base64格式保存 html中canvas渲染图片,并转化成base64格式保存](https://img1.php1.cn/3cd4a/24e5b/525/ea32a428eaecdce7.jpeg)