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

在前端开发中,使用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]

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值