注册 登录
阵浊秀
阵浊秀
  • 发布：2025-07-02 14:40
  • 更新：2025-07-29 16:49
  • 阅读：551

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

分类：uni-app 
<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 负责人:无 分享

    没有找到相关结果

      已邀请:
      DCloud_UNI_yuhe

      DCloud_UNI_yuhe

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

      2025-07-02 14:57 分享
      评论 取消
      1***@qq.com

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

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

      2025-07-29 16:43 分享

      • DCloud_UNI_yuhe

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

        2025-07-29 18:44

      评论 取消
      1***@qq.com

      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>
      2025-07-29 16:49 分享
      评论 取消
      为什么被折叠? 0 个回复被折叠

      要回复问题请先登录或注册

      退出全屏模式 全屏模式 回复
      友情链接
      优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 艾普阳科技 申请友链

      DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

      京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

      | | 违法违规信息举报