uniapp VUE3 鸿蒙真机的时候，html2canvas无法使用的问题

分类：uni-app

鸿蒙截图 uniapp bug已确认

<script module="canvasToImage" lang="renderjs">  
    import html2canvas from "html2canvas"  
    export default {  
        data() {  
            return {}  
        },  
        methods: {  
            async preservation(event, ownerInstance) {  
                ownerInstance.callMethod('showToast', 'load')  
                var dom = document.getElementById('draw')  
                try {  
                    const canvas = await html2canvas(dom, {  
                        background: '#fff',  
                        scale: 2,  
                        useCORS: true,  
                        allowTaint: true,  
                        logging: true  
                    })  

                    let url = canvas.toDataURL('image/png')  
                    ownerInstance.callMethod('saveToAlbum', url)  
                } catch (error) {  
                    console.log(JSON.stringify(error))  
                    ownerInstance.callMethod('showToast', 'hide')  
                    //TODO handle the exception  
                }  

            },  
        }  
    }  
</script>

就算是给一个空view绑定上draw，都会报错 {"stack":"Error: Failed to execute 'open' on 'Document': Can only call open() on same-origin documents."} AI说这是跨域的问题，是鸿蒙对webview的限制比较严重吗，官方有没有在哪里可以配置允许跨域的？

demo.zip

2025-07-02 14:40 负责人:无分享

6 个回复

最佳回复

DCloud_UNI_LXH

由于鸿蒙对 webview 的限制，目前只有还无法同时兼容 renderjs 跨域和沙箱中 files 文件夹中的 html 的跨域。目前为沙箱中 files 文件夹下的 html 可以跨域。

此问题为已知问题且已反馈给鸿蒙，鸿蒙方预计后续会修复此问题

DCloud_UNI_yuhe

你提供一下一个完整的可以直接运行的测试项目

阵浊秀 (作者)

佬，这个可以直接运行，就是要替换一下鸿蒙的那个证书吧？

2025-07-02 15:24
阵浊秀 (作者)

佬怎么样，有说法吗

2025-07-03 09:29
DCloud_UNI_yuhe

回复阵浊秀: 看一下私信

2025-07-03 14:47
jyoungvi

回复阵浊秀: 请问后续有解决了嘛？

2025-07-07 11:52
DCloud_UNI_yuhe

回复 jyoungvi: 可以私信我一下

2025-07-07 11:58
9***@qq.com

回复阵浊秀: 老铁怎么解决的我这边也是这样

2025-07-16 18:15
DCloud_UNI_yuhe

回复 9***@qq.com: 私聊

2025-07-16 18:49
kemp

回复 9***@qq.com: 请问后续解决了吗

2025-07-27 11:00
kemp

回复阵浊秀: 请问后续解决了吗

2025-07-27 11:01
DCloud_UNI_yuhe

回复 kemp: 可以私信我一下

2025-07-28 09:33
yantaicy

回复 DCloud_UNI_yuhe: 麻烦私信一下，给你发私信，但一直没回

2025-08-29 14:47

1***@qq.com - 一名全栈狗

定位到html2canvas代码，就是同一个页面下创建 iframe的时候，iframe和原有的页面不同源，然后调用open方法就出现跨域的问题，找了一下harmony官方文档，应该是这个原因但是不知道如何解决

DCloud_UNI_yuhe

是这个问题，目前还在排查问题

2025-07-29 18:44
seasonZzz

回复 DCloud_UNI_yuhe: 大佬请问这个问题解决了吗

2025-09-01 16:13

1***@qq.com - 一名全栈狗

运行的示例代码如下

{  
  "dependencies": {  
    "html2canvas": "^1.4.1"  
  }  
}

<template>  
    <view class="content">  
        <view id="htmlCanvas">  
            <text>测试文字</text>  
        </view>  

        <button @click="canvasImage.onSaveImage" type="primary" style="margin: 20rpx;">  
            保存  
        </button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {},  
        onLoad() {},  
        methods: {}  
    }  
</script>  
<script module="canvasImage" lang="renderjs">  
    import html2canvas from "html2canvas"  

    export default {  
        methods: {  
            onSaveImage(e) {  
                const dom = document.getElementById('htmlCanvas')  
                html2canvas(dom, {  
                    width: dom.scrollWidth,  
                    height: dom.scrollHeight,  
                    windowWidth: dom.scrollWidth,  
                    scrollY: 0,  
                    scrollX: 0,  
                    useCORS: true,  
                    allowTaint: true,  
                }).then((canvas) => {  
                    console.log(canvas)  
                }).catch(e => {  
                    // 出错 SecurityError: Failed to execute 'open' on 'Document': Can only call open() on same-origin documents.   
                    console.log('error:' + e)  
                })  
            },  
        }  
    }  
</script>