首页 > 编程知识 正文

Cropper跨域问题,canvas

时间:2023-05-05 22:28:31 阅读:10451 作者:1924

解决方案:在前端将网络图像转换为64位格式不需要Alibaba云(AlibabaCloud )服务器的跨域设置。 nginx设定header等。 提供用于转换1,64位格式图像的canvas标签

canvas ref=' head canvas ' style=' position : absolute; height: 0; width: 0; opacity: 0;' /canvas 2,重要方法

注意:请稍后手动将时间戳添加到web图像中。 否则,canvas.toDataURL方法将报告错误

//将网络图像转换为基本64图像到基本64 ()。 ({ let vm=this //请务必设定为let。 否则,不会显示图像。 let image=new Image )进行说明。 //解决跨域问题image.set attribute (' cross origin ',' anonymous ' ); //this.invincibleData.thumb这里是网络图像的路径。 //例: https://down.yantongtech.cn/data/upload/images/2021-03-29/8567 1617081289278 image.src=this.invincion //image.onload表示image.onload=()={ var canvas=VM.$ refs.head canvas; var context=canvas.get context (' 2d ); canvas.width=image.width; canvas.height=image.height; context.drawimage(image,0,0,image.width,image.height ); vardata URL=canvas.todataurl (image/png ); //64位格式的this.invincible data.thumb 64=data URL },3、网络图像成功转换为64位图像后,使用html2canvas时,可以完美解决图像空白和图像跨域

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。