html2Canvas是前端的画布功能,这次做的功能是截图,图片内有后端传过来的图片的base64格式的图片,这个图片也作为头像被截下来作为海报。
一.跨域问题,由于canvas自身的设计,加载的是本地的资源,对跨域资源默认是不加载的,所以就会出现截图功能是存在的,但就是我们截图的时候我们通过后端数据传递过来的图片地址加载的图片,就会莫名其妙的消失。 前端也有解决办法,但是没办法咱是后端程序猿,用后端的解决办法就是用httpclient 将我们的线上图片下载下来,但由于是下载,不能每次请求都要下载一次,所以我们要用redis存我们图片的地址,,下次用户再拿的时候去redis拿就好,哦,对了redis存的是线上图片的地址,又因为我们之前下载过一次所以图片是在本地的,拿到地址就好啦!
二.canvas与object-fit冲突
canvas在截图成海报时,是不兼容object-fit样式的,会导致我们的图片样式不对,出现前后图片不一致的情况,出现这一情况我们可以选择canvas-object-fit 的这个依赖来解决问题。
摆脱Bug,拒绝熬夜,做最好的自己!