html2canvas跨域踩坑日常_html2canvas proxy oss-优快云博客

本文链接：https://blog.youkuaiyun.com/Quiet_tomcat/article/details/123073335

在使用html2canvas+uniapp开发海报图分享功能时，遇到了跨域和头像图片显示的问题。经过排查，设置了oss云存储的跨域，并在html2canvas中启用useCORS，但问题依然存在。最终通过后端接口将图片转为base64解决跨域，但在uniapp的image组件中，发现background-image属性未更新。解决方案是先将base64值赋给临时变量，再更新到data中。问题得到解决，但原因未知。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天接到公司的指令做海报图分享然后尝试使用html2canvas+uview+uniapp进行编写

踩坑如下

html2canvas跨域问题
我司使用的是oss云存储，起初发生跨域以为是本地原因导致，便没在意
第二天部署到测试服务器上时依旧发生跨域便开始注意起来
排查如下：

检查oss云存储是否设置跨域(已设置)
检查html2canvas是否设置useCORS为true(已设置)

在检查后发现都没有问题便陷入了沉思当中，从上午一直到下午也没有解决，无奈只能尝试图片转base64试下，但是在uniapp下没有找到太合适的转换方法，大多是生成画布转base64… 所以决定后端编写接口来进行转base64，转换后再使用html2canvas生成

画布生成代码如下

	// html2canvas生成画布代码
	let container = document.getElementById('shareModal')
	html2canvas(container, {
		scale: 2,
		backgroundColor: '#fff',
		useCORS: true,
	}).then(canvas => {
		this.canvasUrl = canvas.toDataURL("image/png");
		uni.showToast({
			icon: 'success',
			title: '生成图片成功，长按图片可进行保存哦'
		})
	})

转换倒是成功了，当我尝试给avatar替换为base64时奇怪的事情又发生了，生成后还是没有头像，查看数据已经赋值进去了然后调试了一下页面

在这里插入图片描述

发现使用的uniapp image组件会默认设置一个background-image属性，当我替换avatar的值为base64后，该background-image属性没有发生变化

解决方案：采用拿到数据后先赋值给临时变量，临时变量的avatar值改变后再赋值给data

完整代码如下

this.$u.api.getUserInfo({}).then(res => {
		if (res.code != 1) {
			this.$u.toast('获取用户信息失败')
		}		
		let userinfo = res.data
		if (userinfo.avatar){
			if (!userinfo.avatar.indexOf('data:image') >= 0){
				this.getBase64(userinfo.avatar).then(data => {
					// TODO: 注意  此处需要将\r\n换行替换为空，不然无法显示
					userinfo.avatar = data.data.replace(/[\r\n]/g, '')
					that.userinfo = userinfo
				})
			}
		}
});