html2canvas截取图片发送后台

最新推荐文章于 2023-12-07 09:01:59 发布

weixin_34034261

最新推荐文章于 2023-12-07 09:01:59 发布

阅读量359

点赞数

文章标签： json javascript ViewUI

原文链接：https://segmentfault.com/a/1190000017380808

版权

<!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>

weixin_34034261

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫