HTMLCanvasElement.toBlob() 兼容性及使用

  • toBlob 兼容性:
    在最新版chrome和firefox中能正常使用,在Safari中报错:没有这个函数

  • 规避方法:
    不使用toBlob,使用toDataURL()将file转成base64编码,然后转成blob,如果需要,可以再转成file
    以下为在vue中的写法:

                        var file = this.blobToFile(this.dataURItoBlob(this.form.headPicSrc), 'file')
                        this.formData.append('avatar', file)
        dataURItoBlob (dataURI) {
            let arr = dataURI.split(',')
            let mime = arr[0].match(/:(.*?);/)[1]
            let bstr = atob(arr[1])
            let n = bstr.length
            let u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new Blob([u8arr], {type: mime})
        },
        blobToFile (theBlob, fileName) {
            theBlob.lastModifiedDate = new Date()
            theBlob.name = fileName
            return theBlob
        }

posted on 2017-09-06 17:35  cag2050  阅读(1188)  评论(0编辑  收藏  举报

导航