H5页面关于前端canvas生成海报在ios系统上无法显示的问题

最近个人接单开发h5应用程序时遇到这个问题,整理记录下

需求就是客户要求产品详情页面有个分享海报的功能且海报右下角会有个二维码链接,用于产品链接分享功能。

刚开始此功能是交于前端生成,减少服务器点压力。

前端功能完成后在开发者工具和android手机上显示都正常没有任何问题,在ios上发现了问题,图片太长(测试数据大于1024px以上)就无法显示。网上也搜集了不少答案,仍然无法解决问题。

微信公众开发平台的开发文档中也没有相关说明,不过微信小程序开发组件中画布有段说明

也没有说具体,因为我在微信开发者工具上ios系统和android系统上前端生成都可以正常显示,在真机ios系统中显示不出来(小于1024px可以显示)。

最后的解决方案是和后端沟通,由后端生成海报链接,前端负责展示。

其他小伙伴如果有相关解决方案欢迎评论区留言,大家一起进步。

iOS的某些浏览器中,`canvas.toDataURL()`可能失效,这是由于跨域安全策略的限制导致的。为了解决这个问题,可以使用以下两种方法之一: 1. 使用`canvas.toBlob()`替代`canvas.toDataURL()`,然后通过`FileReader`将Blob对象转换为Data URL。 示例代码: ```javascript canvas.toBlob(function(blob) { var reader = new FileReader(); reader.onload = function() { var dataURL = reader.result; // 处理dataURL }; reader.readAsDataURL(blob); }); ``` 2. 将`canvas`元素插入到`<iframe>`中,并通过`postMessage`将`canvas.toDataURL()`返回的数据传递到父窗口。 示例代码: ```javascript // 创建一个隐藏的iframe var iframe = document.createElement('iframe'); iframe.style.display = 'none'; document.body.appendChild(iframe); // 将canvas作为iframe的内容 var iframeDoc = iframe.contentWindow.document; iframeDoc.open(); iframeDoc.write('<!DOCTYPE html><html><body></body></html>'); iframeDoc.close(); var iframeCanvas = iframeDoc.createElement('canvas'); iframeDoc.body.appendChild(iframeCanvas); var iframeCtx = iframeCanvas.getContext('2d'); iframeCtx.drawImage(canvas, 0, 0); // 在iframe中执行toDataURL,并通过postMessage将结果传递到父窗口 iframe.contentWindow.postMessage({ type: 'toDataURL', data: iframeCanvas.toDataURL() }, '*'); // 父窗口中监听message事件,获取toDataURL返回的数据 window.addEventListener('message', function(event) { if (event.origin !== window.location.origin) return; if (event.data.type === 'toDataURL') { var dataURL = event.data.data; // 处理dataURL } }); ``` 这两种方法都可以解决跨域安全策略导致的`canvas.toDataURL()`失效问题,但是第二种方法涉及到跨窗口通信,需要注意安全性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值