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

coszyy

于 2022-12-01 13:28:20 发布

阅读量766

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/dsdDdiss/article/details/128130448

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

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

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]