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

最新推荐文章于 2024-08-16 16:55:01 发布

coszyy

最新推荐文章于 2024-08-16 16:55:01 发布

阅读量684

点赞数

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

本文链接：https://blog.csdn.net/dsdDdiss/article/details/128130448

版权

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

摘要由CSDN通过智能技术生成

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