input 竖行输入，带长按保存自定义图片html2canvas

最新推荐文章于 2024-07-30 17:02:35 发布

coder_daiwang

最新推荐文章于 2024-07-30 17:02:35 发布

阅读量508

点赞数

分类专栏： javascript 微信 web h5

本文链接：https://blog.csdn.net/coder_daiwang/article/details/88536266

版权

javascript 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

微信

4 篇文章 0 订阅

订阅专栏

实现input竖行显示，隐藏输入光标，单向数据绑定同步，html2canvas生成base64自定义图片，可以保存到手机，分享朋友。

代码未仔细整理，有需求，可回复。

左图未输入图，右图为生成的base64图片，可以看到已经添加进去了输入的字

  <script type="text/javascript"> 
        var canshu1 = location.href.split("canshu1=")[1]; 
        function functionName(e) { 
            var changeValue = e.value;
            if ($(".inputLeft")[0].value.length < 6) {} else {
                changeValue = changeValue.substring(0, 6);
            }
            console.log(changeValue + "changeValue");

            $(".inputName")[0].innerHTML = changeValue;
        }
        var focus = true;

        function ofocus(e) {
            if (focus) {
                focus = false;
                $(".inputName")[0].innerHTML = "";
            } 
        } 
        function oblur(e) {
            window.scrollTo(0, document.documentElement.clientHeight);
            var nameV = $(".inputName")[0].innerHTML;
            $(".saveNam1")[0].innerHTML = nameV.charAt(0);
            $(".saveNam2")[0].innerHTML = nameV.charAt(1);
            $(".saveNam3")[0].innerHTML = nameV.charAt(2);
            $(".saveNam4")[0].innerHTML = nameV.charAt(3);
            $(".saveNam5")[0].innerHTML = nameV.charAt(4);
            $(".saveNam6")[0].innerHTML = nameV.charAt(5);
            // 截屏功能   
            setTimeout(() => {
                $('.save,#wapper').show();
                // $(".save").hide();
                setTimeout(() => {
                    html2canvas($(".save"), {
                        onrendered: function(canvas) {
                            $("#wapper").append('<img class="can_img" name="img1" src="' + canvas.toDataURL("image/jpeg", 1.0) + '" />');
                            // $(".wapper").append('<img src="' + canvas.toDataURL("image/jpeg", 1.0) + '" />');
                            $(".save").hide();
                            canvas = null;
                        }
                    })
                }, 100);
            }, 500);

        }
    </script>

html：

<body itemscope itemtype="http://schema.org/WebApplication">
    <div class="container"> 
        <div class="left">
            <img class="inputImg" src="../timeline/end/input.png" alt=""> 
            <div class="inputName">输入您的落款</div>
            <input class="inputLeft" onfocus="ofocus(this)" onblur="oblur(this)" oninput="functionName(this)" type="text" value="">

        </div> 
      
        <div id="wapper">
        </div>
    </div>
    <div class="save">
        <img class="save_bg" src="../timeline/new.jpg" alt="">
        <img class="treeBg" src='../timeline/endBg/tree0Bg.png'>
        <div class="save_nam">
            <h2 class="saveNam1"></h2>
            <h2 class="saveNam2"></h2>
            <h2 class="saveNam3"></h2>
            <h2 class="saveNam4"></h2>
            <h2 class="saveNam5"></h2>
            <h2 class="saveNam6"></h2> 

        </div>
        <!-- <img class="eq" src="../timeline/b.jpg" alt=""> -->
    </div>

</body>

Css：


.left {
    position: absolute;
    width: 12vw;
    /* height: 13.5%; */
    left: 3vw;
    z-index: 999;
    bottom: 20vh;
}

.inputName {
    position: absolute;
    top: 9vw;
    width: 4vw;
    height: 71%;
    /* font-size: 4px; */
    left: 1.7vw;
    line-height: 4.3vw;
    font-size: 1.8vh;
    border: 0px;
    margin: 0 auto;
    overflow: hidden;
    word-wrap: break-word;
}

.inputLeft {
    width: 300%;
    height: 79%;
    position: absolute;
    top: 6vw;
    right: 4vw;
    opacity: 0;
}


.save {
    position: absolute;
    top: 0;
    left: 0%;
    width: 750px;
    height: 1334px;
    display: none;
    overflow: hidden;
    z-index: -2;
    opacity: 0;
}

.save_bg {
    position: absolute;
    width: 750px;
    height: 1334px;
    top: 0;
    left: 0;
    background-color: white;
}

.save_nam {
    position: absolute;
    /* top: 7vw; */
    width: 11vw; 
    line-height: 14vw; 
    top: 51.5%;
    left: 18vw; 
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.saveNamX {
    width: 100%;
    height: 10px;
}
.saveNam1 {
    width: 100%;
    height: 10px;
}
.saveNam2 {
    width: 100%;
    height: 10px;
}

.saveNam3 {
    width: 100%;
    height: 10px;
}

.saveNam4 {
    width: 100%;
    height: 10px;
}

.saveNam5 {
    width: 100%;
    height: 10px;
}

.saveNam6 {
    width: 100%;
    height: 10px;
}

#wapper {
    /* opacity: 0; */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    display: none;
}