canvas利用formdata上傳到服務器

1.首先繪制canvas圖片

<canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;border-radius:50%">
        您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>

這里canvas繪圖就不是本文章講解的內容，我們簡單的在畫布上寫兩個字：

var canvas = document.getElementById("myCanvas");
var ctx = this.c.getContext("2d");
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.font = 'bold 16px arial';
ctx.fillStyle = 'red';
ctx.fillText('World', 40,40);

效果如下

2.將圖片轉成二進制利用formdata上傳

         let src = canvas.toDataURL("image/png")//這里轉成的是base64的地址，直接用到img標簽的src是可以顯示圖片的 var fd = new FormData();
        
         function dataURItoBlob(dataURI) {//圖片轉成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});
         }
         var blob = dataURItoBlob(src);
 
         fd.append('source_from','webpage_upload')//在formdata加入需要的參數
         fd.append('file',blob)
　　　　　/*以下是ng4的封裝上傳代碼*/ var service = ()=>{
             return this.repositoryService.uplodimage(fd)
         }
         var callback = (re)=>{
             if(re['success']){
                 console.log(re)
                 this.form.image_cover_contents = re.data.file_info.file_path;
             }
         }
         this.core.doServiceAndCallback('上傳圖片',service,callback)