html2canvas截取圖片發送後臺

時間 2019-12-05

標籤 html2canvas html canvas 截取圖片發送後臺欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
      <head>
        <title></title>
        <style type="text/css">
              div{height:800px;}
              .box1{background:red;}
              .box2{background:blue;}
              .box3{background:green;}
        </style>
      </head>
      <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <script type="text/javascript" src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
        <script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
        <script type="text/javascript">
            html2canvas(document.body).then(function(canvas) {
                //document.body.appendChild(canvas);
                var saveImage = canvas.toDataURL('image/jpg');
                var fd = new FormData();
                var blob = dataURItoBlob(saveImage);
                fd.append('file', blob, Date.now() + '.jpg');
                
                $.ajax({
                    url: "/api/fileUpload.do",
                    type:'post',
                    processData: false, // 不會將 data 參數序列化字符串
                    contentType: false,  // 參數格式，默認JSON.把他幹掉
                    data: fd ,
                    success:function (data){  
                        //Do something
                    } 
                 });
            });
            function dataURItoBlob(dataURI) {//base64轉buffer
                var byteString = atob(dataURI.split(',')[1]);
                var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
                var ab = new ArrayBuffer(byteString.length);
                var ia = new Uint8Array(ab);
                for (var i = 0; i < byteString.length; i++) {
                    ia[i] = byteString.charCodeAt(i);
                }
                return new Blob([ab], {type: mimeString});
            }
        </script>
      </body>
</html>

相關標籤/搜索