网页实现头像截取

头像截取

因为再写注册登陆过程中,就像如何去实现一个类似于原生app的头像截取 首先想到的是向后台传送,但是因为后台截取是需要再liunx安装一些支持的软件在可以使用对应的库 因为再windows下开发所以先舍弃了这种办法,采用canvas绘制截取的想法

实现方法

1. 首先是input中 type='file'的change事件 可以获取到对应的图片 若上传一张就是 input.files[0],这个里面是一个file对象,里面有file文件的格式大小,其本身是继承自blob对象的,这里在项目中遇到的问题就是,如果两次选择的是同一张图片的话,是不能触发change事件的 解决方法就是将其的value置为""就可以了

2. FileReader对象,这个就是读取本地文件的一个api,他可以将文件读成二进制blob或者读成url,即base64,因为我们要直接预览并且画到画布上就用到了 其的 readAsDataUrl方法即读取成base64码,在其onload事件中获取这个src,然后给图片设置

3. canvas绘制api, 首先是 getContext,取得2d画布然后设置其大小,这里的大小一定和图片本身逻辑一样大的,因为之后画的时候是需要设置宽高比对应放缩的，若其实际大小比设置的大就必须要强制拉升和缩小对应比例的大小，但是遇到 宽比指定高大， 然后按照比例缩放，这里画之前一定要将整个画布清理 clearRect方法清理画布 然后通过drawImage(image,0,0,width,height)在画布上截取对应图片 然后再通过 toDataUrl(this.type,1) 压缩,这里注意的是 图片现在只是画上去一次，然后截取 就是说只是把图片等比压缩或者拉升了一下,并没有截取

4. 下一步 再通过再canvas画布上实现同样的效果，但是这一次是截取 drawImage(image,x,y,targetwidth,targetheight)来画，即最终大小是和其画的是一样的,只是画的对应图片的大小位置不同，即最终需要 120*120 canvas大小就应该是120*120,图片多大都可以 然后截取变为一个blob对象上传到后台，后台对应只需要存起来，然后数据库里对应存放路径就行。