javascript是有操作二進位制檔案的方法的，在這裡就不詳述了。

而AJAX的核心XMLHttpRequest也可以獲取服務端給的二進位制Blob。

可以參考：

XMLHttpRequest Level 2 使用指南

Blob - MDN

FileReader - MDN

程式碼還是基於上一篇文章的demo。二進位制就用canvas轉的blob資料模擬一下。

思路很簡單，blob轉image，image再轉canvas。（image是base64的）

    $("#getCroppedCanvas").on("click", function () {
        console.log($(
 
'#image').cropper('getCroppedCanvas'));;
        var cas=$('#image').cropper('getCroppedCanvas');
        var base64url=cas.toDataURL('image/jpeg');

        // new
        cas.toBlob(function (e) {
            console.log(e);  //生成Blob的圖片格式
            const reader = new FileReader()
            reader.readAsDataURL(e)
            reader.onload 
 
= function(e){
                console.log("reader")
                console.log(e.target.result)
                let img = new Image()
                img.src = e.target.result
                img.id = "abc"
                img.style.display = "none"
                document.body.appendChild(img)
                img.onload 
 
= function () {
                    console.log("img")
                    // console.log(this)
                    console.log(this.width)
                    console.log(this.height)
                    console.log(this.naturalWidth)
                    console.log(this.naturalHeight)
                    let canvas = document.createElement("canvas")
                    canvas.width = this.width
                    canvas.height = this.height
                    let ctx = canvas.getContext("2d")
                    ctx.drawImage(this, 0, 0)
                    document.body.removeChild(img)
                    document.body.appendChild(canvas)
                }
            }
        })        
    })

注意//new註釋下面的部分。

這段程式碼有三層回撥：canvas.toBlob()、new FileReader().onload()、image.onload()。

image回撥的目的是獲取圖片正確的寬高，賦值給canvas。canvas有預設寬高，放著不管的話會拉伸圖片。

值得注意的是：CanvasRenderingContext2D.drawImage()方法的第一個引數是不支援base64圖片流的，這一點MDN的文件說明了。

image 繪製到上下文的元素。

允許任何的 canvas 影象源(CanvasImageSource)，例如：CSSImageValue，HTMLImageElement，SVGImageElement，HTMLVideoElement，HTMLCanvasElement，ImageBitmap 或者OffscreenCanvas。

——CanvasRenderingContext2D.drawImage() - MDN

參考：CanvasRenderingContext2D.drawImage() - MDN

最後， CanvasRenderingContext2D.drawImage()方法 其實隱藏著一個大坑：使用不同的引數，引數的順序是不一樣的。

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

我曾經被這個方法折騰的百思不得其解，看了MDN注意到這個坑爹的細節。

以上。