master

分支 (2)

管理

管理

master

资源

image-generation-canvas
/
test.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片生成Canvas</title>
    <style>
        .nh_canvas {
            width: 850px;
            height: 680px;
            line-height: 680px;
            text-align: center;
        }

        .tip-font {
            width: 850px;
            margin-top: 20px;
            font-size: 13px;
            color: rgb(83, 83, 83);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="nh_canvas">
        <h1 class="loging">图形生成中...</h1>
    </div>
    <div class="tip-font">
        <span>鼠标左键按住滑动可3D浏览图片</span>
        <span>鼠标滚轮放大/缩小图片</span>
        <span>滚轮右键按住可拖动图片</span>
    </div>
    <script type="module">
        import { renderingCanvas } from './js/imgCanvas.js'
        let nhCanvas = document.getElementsByClassName("nh_canvas")[0]
        let lodingDom = document.getElementsByClassName("loging")[0]
        window.onload = () => {
            let loding = renderingCanvas(nhCanvas, "https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500")
            if (loding) lodingDom.style.display = "none"
            else lodingDom.innerHTML = "网络异常,生成失败,请刷新重试"
        }
    </script>
</body>

</html>