原生图片转字符串并上传

<body>
    <div class="face">
        <p><img class="normalFace" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3270902236,2444876234&fm=26&gp=0.jpg" onclick="fileSelect();" id="testimg"></p>
        <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" style="display:none;">
    </div>
    <script type="text/javascript">
        function fileSelect() {
            document.getElementById("fileToUpload").click();
            showimg()
        }

        function fileSelected() {
            // 文件bai选择后触du发次zhi函数dao
        }
        //获取图片base64
        function showimg() {
            var input = document.getElementById("fileToUpload");
            input.addEventListener("change", handleFiles, false);

            function handleFiles(e) {
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                var img = new Image();
                img.onload = function() {
                    ctx.drawImage(img, 0, 0);
                    var base64 = canvas.toDataURL();
                    console.log(base64);
                };
                img.src = URL.createObjectURL(e.target.files[0]);
                document.getElementById('testimg').src = img.src
            }
        }
    </script>加粗样式
</body>

猜你喜欢

转载自blog.csdn.net/weixin_46476460/article/details/108017969