canvas畫布儲存圖片，avaScript將圖片轉畫布，用JavaScript將畫布保持成圖片格式，上傳阿里雲
阿新 • • 發佈：2019-01-04
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { padding: 0; margin: 0; /*background: black;*/ } div#a { width: 1105px; height: 500px; margin: 0 auto; border: 0px solid; } /*#canvas{*/ /*background: white;*/ /*margin: 100px 0 0 300px;*/ /*}*/ </style> </head> <body> <div id="a"> <canvas id="canvas" width="1105" height="500" style="border: solid 1px #000"></canvas> </div> <div id="down"> <center> <button onclick="restuya()">清除</button> <button onclick="saveTu()" id="btn">儲存</button> </center> </div> <img id="imgId" src="" alt="" width="300px" height="300px"> </body> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script> <script> var img = document.getElementById('imgId'); document.getElementById("btn").disabled = true; var canvas = document.getElementById('canvas');// 獲取 canvas 物件 var ctx = canvas.getContext('2d');// 獲取繪圖環境 var last = null; var filedata = null;// 檔案物件 ctx.strokeStyle = "pink"; ctx.fillStyle = '#FFF'; ctx.fillRect(0,0,1105,500); canvas.onmousedown = function () {// 滑鼠按下 canvas.onmousemove = move;// 在滑鼠按下後觸發滑鼠移動事件 document.getElementById("btn").disabled = false; }; canvas.onmouseup = function () {// 滑鼠擡起取消滑鼠移動的事件 canvas.onmousemove = null; last = null; }; canvas.onmouseout = function () {// 滑鼠移出畫布時 移動事件也要取消。 canvas.onmousemove = null; last = null; }; function move(e) {// 滑鼠移動函式 // console.log(e.offsetX); if (last != null) { ctx.beginPath(); ctx.moveTo(last[0], last[1]); ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); } // 第一次觸發這個函式，只做一件事，把當前 滑鼠的 x , y 的位置記錄下來 // 做下一次 線段的 起始點。 last = [e.offsetX, e.offsetY]; } // 重新在畫 function restuya() { document.getElementById("btn").disabled = true; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.strokeStyle = "pink"; ctx.fillStyle = '#FFF'; ctx.fillRect(0,0,1105,500); drawImg(filedata); } // 繪製圖片 function drawImg(filedata) { var readFile = new FileReader(); readFile.readAsDataURL(filedata); // 圖片讀取成功 readFile.onload = function () { var Img = new Image(); Img.src = this.result; Img.onload = function () { // 根據 圖片的 寬高 來 設定canvas 寬和高 canvas.width = Img.width; canvas.height = Img.height; ctx.drawImage(Img, 0, 0); } } } function saveTu() { var saveImage = canvas.toDataURL('images/jpg'); // base64 // var b64 = saveImage.substring(22); // 二進位制 fn(saveImage); img.src = saveImage; } //上傳圖片 function fn(b64) { function toBlob(urlData, fileType) { var bytes = window.atob(urlData), n = bytes.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bytes.charCodeAt(n); } return new Blob([u8arr], {type: fileType}); } // 影象資料 (e.g. data:image/png;base64,iVBOR...yssDuN70DiAAAAABJRU5ErkJggg==) var dataUrl = b64; var base64 = dataUrl.split(',')[1]; var fileType = dataUrl.split(';')[0].split(':')[1]; // base64轉blob var blob = toBlob(base64, fileType); // blob轉arrayBuffer var reader = new FileReader(); reader.readAsArrayBuffer(blob); reader.onload = function (event) { // 配置 var client = new OSS.Wrapper({ // 這個地方配置上傳阿里雲的 引數配置 region: '', // oss-cn-bei1 accessKeyId: '', // LTAIsxEObGVQyWAj2 accessKeySecret: '', // 1U84lkUWtU1cmXe4jUsdUYuog3p1PB3 bucket: '', // zypartner-test4 root_dir: '' // clinicQualificationImg5 }); // 檔名 var date = new Date(); var time = '' + date.getFullYear(); var storeAs = 'Uploads/file/' + time + '/' + date.getTime() + '.' + blob.type.split('/')[1]; // arrayBuffer轉Buffer var buffer = new OSS.Buffer(event.target.result); // 上傳 client.put(storeAs, buffer).then(function (result) { console.log(result); console.log(result.url); $.ajax({ url: "http://192.168.18.82:8080/zyExcel/test/test", dataType: "json", //返回格式為json async: true, //請求是否非同步，預設為非同步，這也是ajax重要特性 data: {pic: result.url}, type: 'post', beforeSend: function () { //請求前的處理 }, success: function (req) { console.log(req); //請求成功時處理 }, complete: function () { //請求完成的處理 }, error: function () { console.log("接口出錯了"); //請求出錯處理 } }); /* e.g. result = { name: "Uploads/file/20171125/1511601396119.png", res: {status: 200, statusCode: 200, headers: {…}, size: 0, aborted: false, …}, url: "http://bucket.oss-cn-shenzhen.aliyuncs.com/Uploads/file/20171125/1511601396119.png" } */ }).catch(function (err) { console.log(err); }); } } </script> </html>