原生js canvas画图(剪裁)后上传到服务器_js canvas涂鸦后上传-CSDN博客

本文链接：https://blog.csdn.net/kidoo1012/article/details/75155576
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>截图</title>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<canvas id="myCanvas" width="200px" height="200px" style="border:1px solid #d3d3d3;">
</canvas>
<br>
<button id="bigger">放大</button>
<button id="smaller">缩小</button>
<button id="draw" οnclick="draw()">画图</button>
<button id="screenshot" οnclick="screenshot()">生成</button>
<button id="up" οnclick="up2Qn()" hidden>上传测试</button>
<input type="file" id="file" accept="image/*"><br>
<br>
<img src="http://oo8o2c9op.bkt.clouddn.com/Fm7WglywoEXVuBbpYk-qBbVfsft1.jpg" crossorigin="anonymous" id="myImg">
</body>
<img src="" style="width: 200px;height: 200px" id="imgTmp">
</body>
</html>
<script>

    window.onload = function () {
        var file = document.getElementById("file");
        var imgTmp = document.getElementById("imgTmp");
        var reader = new FileReader();
        file.addEventListener("change", function () {
            reader.readAsDataURL(file.files[0]);
        })
        reader.onloadend = function (e) {
            imgTmp.src = e.target.result;
        };
    }

    function draw() {
        var img = document.getElementById("myImg");
        console.info(img.width + "-" + img.height)

        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        ctx.drawImage(img, 0, 0, 420, 420);
    }
    function screenshot() {

    }

    function up2Qn() {
        var xmlHttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();//code for all new browsers
        }
        xmlhttp.onreadystatechange = function state_Change() {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    console.info("获得picInfo:" + xmlhttp.responseText)
                    upload2QN(JSON.parse(xmlhttp.responseText).data.qnToken, dataURLtoBlob(document.getElementById("myCanvas").toDataURL()))
                } else {
                    console.info("失败,responseText:" + xmlhttp.responseText + ",statusCode:" + xmlhttp.status);
                }
            }
        }
        xmlhttp.open("POST", "/customer/store/queryPicInfo", true);
        xmlhttp.send(null);
    }

    //dataURL to blob
    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1]
        var bstr = atob(arr[1])
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type: mime});
    }

    function upload2QN(qnToken, b) {
        var formData = new FormData();
        formData.append("token", qnToken);
        formData.append("file", b);

        var xmlHttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();//code for all new browsers
        }
        xmlhttp.onreadystatechange = function state_Change() {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    console.info("上传完成:" + xmlhttp.responseText);
                } else {
                    console.info("上传失败,responseText:" + xmlhttp.responseText + ",statusCode:" + xmlhttp.status);
                }
            }
        }
        xmlhttp.open("POST", "http://upload-z2.qiniu.com", true);
        xmlhttp.send(formData);
    }

</script>