jietu5.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. let $jq = '';
  2. $jq = $
  3. var $180 = $.noConflict();
  4. function jietu_shishi(uid, cid, stage, task, tool) {
  5. html2canvas($jq("body")[0]).then(function (canvas) {
  6. //獲取截取圖片路徑
  7. var base64Url = canvas.toDataURL('image/png');
  8. //後臺操作處理
  9. var base64 = "<img src=" + base64Url + " />"
  10. var file = dataURLtoFile_shishi(base64Url, "截圖")
  11. beforeUpload_shishi(file, uid, cid, stage, task, tool)
  12. // $jq("body")[0].innerHTML = base64
  13. });
  14. }
  15. function dataURLtoFile_shishi(dataurl, filename) {
  16. let arr = dataurl.split(","),
  17. mime = arr[0].match(/:(.*?);/)[1],
  18. bstr = atob(arr[1]),
  19. n = bstr.length,
  20. u8arr = new Uint8Array(n);
  21. while (n--) {
  22. u8arr[n] = bstr.charCodeAt(n);
  23. }
  24. return new File([u8arr], filename, {
  25. type: mime
  26. });
  27. }
  28. function beforeUpload_shishi(nfile, uid, cid, stage, task, tool, loading, atool, text) {
  29. // loading.style.display = 'flex'
  30. // top.document.getElementById(loading);
  31. // document.body.appendChild(_loading)
  32. var file = nfile;
  33. var credentials = {
  34. accessKeyId: "AKIATLPEDU37QV5CHLMH",
  35. secretAccessKey: "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",
  36. }; //秘鑰形式的登錄上傳
  37. window.AWS.config.update(credentials);
  38. window.AWS.config.region = "cn-northwest-1"; //設置區域
  39. var bucket = new window.AWS.S3({
  40. params: {
  41. Bucket: "ccrb"
  42. }
  43. }); //選擇桶
  44. if (file) {
  45. var params = {
  46. Key: file.name.split(".")[0] + new Date().getTime() + "." + "png",
  47. ContentType: file.type,
  48. Body: file,
  49. "Access-Control-Allow-Credentials": "*",
  50. ACL: "public-read",
  51. }; //key可以設置為桶的相抵路徑,Body為文件, ACL最好要設置
  52. var options = {
  53. partSize: 2048 * 1024 * 1024,
  54. queueSize: 2,
  55. leavePartsOnError: true,
  56. };
  57. bucket.upload(params, options)
  58. .on("httpUploadProgress", function (evt) {
  59. //這裏可以寫進度條
  60. // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
  61. }).send(function (err, data) {
  62. if (data) {
  63. console.log(data.Location);
  64. var a = {
  65. name: file.name,
  66. url: data.Location,
  67. uid: file.uid,
  68. }
  69. addSWork_shishi(uid, cid, stage, task, tool, data.Location, loading, atool, text)
  70. } else {
  71. var _a = document.getElementsByTagName("img")
  72. for (var i = 0; i < _a.length; i++) {
  73. _a[i].removeAttribute("crossorigin")
  74. }
  75. top.document.getElementById(loading).children[0].style.display = "none"
  76. let _div = document.createElement('div')
  77. _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;"
  78. let _inner = document.createElement('div')
  79. _inner.style = "color: #fff;padding: 15px;background: #00000070;border-radius: 5px;font-size: 18px;"
  80. _inner.innerHTML = "上傳失敗,網絡錯誤"
  81. _div.appendChild(_inner)
  82. document.body.appendChild(_div)
  83. setTimeout(() => {
  84. document.body.removeChild(_div)
  85. }, 1000);
  86. }
  87. });
  88. }
  89. }
  90. function addSWork_shishi(uid, cid, stage, task, tool, a, loading, atool, text) {
  91. let params = {
  92. uid: uid,
  93. cid: cid,
  94. stage: stage,
  95. task: task,
  96. tool: tool,
  97. content: a,
  98. type: 1,
  99. atool: atool,
  100. text: text
  101. // upload: JSON.stringify(this.imgFileUp),
  102. };
  103. if (!$jq) {
  104. $jq = $
  105. var $180 = $.noConflict();
  106. }
  107. $jq.ajax({
  108. type: 'POST',
  109. url: 'https://pbl.cocorobo.cn/api/pbl/addCourseWorks4studio',
  110. data: params,
  111. dataType: "json",
  112. error: (XMLHttpRequest, textStatus, errorThrown) => {
  113. var _a = document.getElementsByTagName("img")
  114. for (var i = 0; i < _a.length; i++) {
  115. _a[i].removeAttribute("crossorigin")
  116. }
  117. top.document.getElementById(loading).children[0].style.display = "none"
  118. let _div = document.createElement('div')
  119. _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;"
  120. let _inner = document.createElement('div')
  121. _inner.style = "color: #fff;padding: 15px;background: #00000070;border-radius: 5px;font-size: 18px;"
  122. _inner.innerHTML = "上傳失敗,網絡錯誤"
  123. _div.appendChild(_inner)
  124. document.body.appendChild(_div)
  125. setTimeout(() => {
  126. document.body.removeChild(_div)
  127. }, 1000);
  128. },
  129. success: (data) => {
  130. setTimeout(() => {
  131. var _a = document.getElementsByTagName("img")
  132. for (var i = 0; i < _a.length; i++) {
  133. _a[i].removeAttribute("crossorigin")
  134. }
  135. top.document.getElementById(loading).children[0].style.display = "none"
  136. let _div = document.createElement('div')
  137. _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;"
  138. let _inner = document.createElement('div')
  139. _inner.style = "color: #fff;padding: 15px;background: #00000070;border-radius: 5px;font-size: 18px;"
  140. _inner.innerHTML = "截圖上傳成功"
  141. _div.appendChild(_inner)
  142. document.body.appendChild(_div)
  143. _div.onclick = () => {
  144. document.body.removeChild(_div)
  145. }
  146. setTimeout(() => {
  147. // document.body.removeChild(_loading)
  148. document.body.removeChild(_div)
  149. }, 1000);
  150. console.log("截圖上傳成功");
  151. }, 3000)
  152. }
  153. })
  154. }