html2canvas跨域，转成base64图片给安卓，发现img图片显示不了

最新推荐文章于 2025-10-30 13:49:29 发布

原创最新推荐文章于 2025-10-30 13:49:29 发布 · 799 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

在前端开发中，使用html2canvas将HTML转换为canvas，然后转成base64图片时遇到跨域问题。为解决此问题，可以尝试在图片URL后添加任意字符串参数，设置图片的crossOrigin属性为'anonymous'，并在html2canvas配置中启用useCORS选项。同时，确保安卓端处理跨域。示例代码展示了如何添加这些属性和配置，并通过jsPDF生成PDF。

部署运行你感兴趣的模型镜像

1.图片路径后面加?any_string_is_ok

2.图片加crossOrigin="anonymous"属性

3.html2canvas加useCORS: true

4.前端跨域完成，如果安卓调用，安卓也要处理跨域

<img src="~@/assets/hosLogo.png?any_string_is_ok" crossOrigin="anonymous">

let pdfContent = document.querySelector('#AssessmentForm')

html2canvas(pdfContent, { scale: 2, useCORS: true }).then(async (canvas) => {

const contentWidth = canvas.width

const contentHeight = canvas.height

const pageHeight = (contentWidth / 560.28) * 829.89

let leftHeight = contentHeight

let position = 12

const imgWidth = 560.28

const imgHeight = (imgWidth / contentWidth) * contentHeight

const pageData = canvas.toDataURL('image/jpeg', 1.0)

const pdf = new jsPDF('', 'pt', 'a4')

if (leftHeight < pageHeight) {

pdf.addImage(pageData, 'JPEG', 30, 12, imgWidth, imgHeight)

} else {

while (leftHeight > 0) {

pdf.addImage(pageData, 'JPEG', 30, position, imgWidth, imgHeight)

leftHeight -= pageHeight

position -= 829.89

if (leftHeight > 0) {

pdf.addPage()

}

}

}

const dataUrl = pdf.output('datauristring')

const base64 = dataUrl.split('base64,')[1]