CocoRoboDesktop/js/Common/jietu2.js

//  let _loading = document.createElement('div')
//  _loading.style = "width:100%;height:100%;background:#0000008f;position:fixed;top:0;left:0;z-index:99999999999999;display: flex;justify-content: center;align-items: center;"
//  let _lchild = document.createElement('div')
//  let _limg = document.createElement('img')
//  _limg.src = 'https://pbl.cocorobo.cn/pbl-student-table/dist/js/loading.gif'
//  _limg.style = "width: 26px;margin-right: 10px;"
//  _lchild.appendChild(_limg)
//  let _lspan = document.createElement('span')
//  _lspan.innerHTML = "上傳中..."
//  _lchild.appendChild(_lspan)
//  _lchild.style = "color: #fff;padding: 15px;background: #00000070;border-radius: 5px;font-size: 18px;display:flex;align-items:center;"
//  _loading.appendChild(_lchild)
//  document.body.appendChild(_loading)
let $jq = '';
$jq = $
var $180 = $.noConflict();
function jietu_shishi(uid, cid, stage, task, tool) {
  html2canvas($jq("body")[0]).then(function (canvas) {
    //獲取截取圖片路徑

    var base64Url = canvas.toDataURL('image/png');
    //後臺操作處理

    var base64 = "<img src=" + base64Url + " />"
    var file = dataURLtoFile_shishi(base64Url, "截圖")
    beforeUpload_shishi(file, uid, cid, stage, task, tool)
    // $jq("body")[0].innerHTML = base64
  });
}

function dataURLtoFile_shishi(dataurl, filename) {
  let arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {
    type: mime
  });
}


function beforeUpload_shishi(nfile, uid, cid, stage, task, tool, loading, atool, text) {
  // loading.style.display = 'flex'
  // top.document.getElementById(loading);
  //  document.body.appendChild(_loading)
  var file = nfile;
  var credentials = {
    accessKeyId: "AKIATLPEDU37QV5CHLMH",
    secretAccessKey: "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",
  }; //秘鑰形式的登錄上傳
  window.AWS.config.update(credentials);
  window.AWS.config.region = "cn-northwest-1"; //設置區域

  var bucket = new window.AWS.S3({
    params: {
      Bucket: "ccrb"
    }
  }); //選擇桶

  if (file) {
    var params = {
      Key: file.name.split(".")[0] + new Date().getTime() + "." + "png",
      ContentType: file.type,
      Body: file,
      "Access-Control-Allow-Credentials": "*",
      ACL: "public-read",
    }; //key可以設置為桶的相抵路徑，Body為文件， ACL最好要設置
    var options = {
      partSize: 2048 * 1024 * 1024,
      queueSize: 2,
      leavePartsOnError: true,
    };
    bucket.upload(params, options)
      .on("httpUploadProgress", function (evt) {
        //這裏可以寫進度條
        // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
      }).send(function (err, data) {
        if (data) {
          console.log(data.Location);
          var a = {
            name: file.name,
            url: data.Location,
            uid: file.uid,
          }
          addSWork_shishi(uid, cid, stage, task, tool, data.Location, loading, atool, text)
        } else {
          var _a = document.getElementsByTagName("img")
          for (var i = 0; i < _a.length; i++) {
            _a[i].removeAttribute("crossorigin")
          }
          top.document.getElementById(loading).children[0].style.display = "none"
          let _div = document.createElement('div')
          _div.style = "width:100%;height:100%;background:#0000008f;position:fixed;top:0;left:0;z-index:99999999999999;display: flex;justify-content: center;align-items: center;"
          let _inner = document.createElement('div')
          _inner.style = "color: #fff;padding: 15px;background: #00000070;border-radius: 5px;font-size: 18px;"
          _inner.innerHTML = "上傳失敗，網絡錯誤"
          _div.appendChild(_inner)
          document.body.appendChild(_div)
          setTimeout(() => {
            document.body.removeChild(_div)
          }, 1000);
        }

      });
  }
}

function addSWork_shishi(uid, cid, stage, task, tool, a, loading, atool, text) {
  let params = {
    uid: uid,
    cid: cid,
    stage: stage,
    task: task,
    tool: tool,
    content: a,
    type: 1,
    atool: atool,
    text: text
    // upload: JSON.stringify(this.imgFileUp),
  };
  if (!$jq) {
    $jq = $
    var $180 = $.noConflict();
  }
  $jq.ajax({
    type: 'POST',
    url: 'https://pbl.cocorobo.cn/api/pbl/addCourseWorks4',
    data: params,
    dataType: "json",
    error: (XMLHttpRequest, textStatus, errorThrown) => {
      var _a = document.getElementsByTagName("img")
      for (var i = 0; i < _a.length; i++) {
        _a[i].removeAttribute("crossorigin")
      }
      top.document.getElementById(loading).children[0].style.display = "none"
      let _div = document.createElement('div')
      _div.style = "width:100%;height:100%;background:#0000008f;position:fixed;top:0;left:0;z-index:99999999999999;display: flex;justify-content: center;align-items: center;"
      let _inner = document.createElement('div')
      _inner.style = "color: #fff;padding: 15px;background: #00000070;border-radius: 5px;font-size: 18px;"
      _inner.innerHTML = "上傳失敗，網絡錯誤"
      _div.appendChild(_inner)
      document.body.appendChild(_div)
      setTimeout(() => {
        document.body.removeChild(_div)
      }, 1000);
    },
    success: (data) => {
      setTimeout(() => {
        var _a = document.getElementsByTagName("img")
        for (var i = 0; i < _a.length; i++) {
          _a[i].removeAttribute("crossorigin")
        }
        top.document.getElementById(loading).children[0].style.display = "none"
        let _div = document.createElement('div')
        _div.style = "width:100%;height:100%;background:#0000008f;position:fixed;top:0;left:0;z-index:99999999999999;display: flex;justify-content: center;align-items: center;"
        let _inner = document.createElement('div')
        _inner.style = "color: #fff;padding: 15px;background: #00000070;border-radius: 5px;font-size: 18px;"
        _inner.innerHTML = "截圖上傳成功"
        _div.appendChild(_inner)
        document.body.appendChild(_div)
        _div.onclick = () => {
          document.body.removeChild(_div)
        }
        setTimeout(() => {
          //  document.body.removeChild(_loading)
          document.body.removeChild(_div)
        }, 1000);
        console.log("截圖上傳成功");
      }, 3000)
    }
  })
}