js数据流之间的转换blobfileDataURLcanva

　　将blob转成file
　　利用newFile（）；functionblobToFile（blob，filename，type）｛returnnewFile（〔blob〕，filename，｛type｝）｝blobToFile（testinfo，test，textplain）
　　输出如下
　　更进一步了解可阅读MDNFileWebAPI鎺彛鍙傝MDNMDNWebDocsMDNlogoMozillalogo
　　Blob（）WebAPI接口参考MDN讲解将file转换成DataURL
　　利用URL。createObjectURL（）inputtypefileidfileimgidimgletimgdocument。getElementById（img）letfiledocument。getElementById（file）file。onchangefunction（）｛letimgFilethis。files〔0〕img。srcURL。createObjectURL（imgFile）img。onloadfunction（）｛URL。revokeObjectURL（this。src）｝｝
　　更进一步了解可阅读MDNURL。createObjectURL（）WebAPI鎺彛鍙傝MDNMDNWebDocsMDNlogoMozillalogo讲解利用FileReader。readAsDataURL（）letimgdocument。getElementById（img）letfiledocument。getElementById（file）file。onchangefunction（e）｛letimgFilethis。files〔0〕letfileReadernewFileReader（）fileReader。readAsDataURL（imgFile）fileReader。onloadfunction（）｛img。srcthis。result｝｝
　　更进一步了解可阅读FileReaderWebAPI鎺彛鍙傝MDNMDNWebDocsMDNlogoMozillalogo简介将DataURL转成filefunctiondataURLToFile（dataUrl，fileName）｛constdataArrdataUrl。split（，）constmimedataArr〔0〕。match（：（。）；）〔1〕constoriginStratob（dataArr〔1〕）returnnewFile（〔originStr〕，fileName，｛type：mime｝）｝dataURLToFile（data：base64，YWFhYWFhYQ，测试文件）File｛name：测试文件，lastModified：1640784525620，lastModifiedDate：WedDec29202121：28：45GMT0800（中国标准时间），webkitRelativePath：，size：7，｝
　　复杂处理方式如下functiondataURLToFile（dataUrl，filename）｛constdataArrdataUrl。split（，）constmimedataArr〔0〕。match（：（。）；）〔1〕constoriginStratob（dataArr〔1〕）letnoriginStr。lengthconstu8ArrnewUint8Array（n）while（n）｛u8Arr〔n〕originStr。charCodeAt（n）｝returnnewFile（〔u8Arr〕，filename，｛type：mime｝）｝dataURLToFile（data：base64，YWFhYWFhYQ，测试文件）console。log（dataURLToFile（data：base64，YWFhYWFhYQ，测试文件））；File｛name：测试文件，lastModified：1640784866937，lastModifiedDate：WedDec29202121：34：26GMT0800（中国标准时间），webkitRelativePath：，size：7，｝
　　将canvas转成DataURL
　　利用canvas。toDataURL（）htmlinputtypefileacceptimageidfilejsdocument。querySelector（file）。onchangefunction（）｛canvasToDataURL（this。files〔0〕）。then（resconsole。log（res））｝functioncanvasToDataURL（file）｛returnnewPromise（resolve｛constimgdocument。createElement（img）img。srcURL。createObjectURL（file）img。onloadfunction（）｛constcanvasdocument。createElement（canvas）canvas。widthimg。widthcanvas。heightimg。heightconstctxcanvas。getContext（2d）ctx。drawImage（img，0，0）resolve（canvas。toDataURL（imagepng，1））｝｝）｝
　　将DataURL转成canvasfunctiondataUrlToCanvas（dataUrl）｛returnnewPromise（resolve｛constimgnewImage（）img。srcdataUrlimg。onloadfunction（）｛constcanvasdocument。createElement（canvas）canvas。widththis。widthcanvas。heightthis。heightconstctxcanvas。getContext（2d）ctx。drawImage（this，0，0）resolve（canvas）｝｝）｝constdataUrldata：base64，iVBORw0KGgoAAAANSUh。。。dataUrlToCanvas（dataUrl）。then（resdocument。body。appendChild（res））
　　将canvas转成blob
　　利用canvas。toBlob（）
　　htmlinputtypefileacceptimageidfilejsdocument。querySelector（file）。onchangefunction（）｛canvasToDataURL（this。files〔0〕）。then（resconsole。log（res））｝functioncanvasToDataURL（file）｛returnnewPromise（resolve｛constimgdocument。createElement（img）img。srcURL。createObjectURL（file）img。onloadfunction（）｛constcanvasdocument。createElement（canvas）canvas。widthimg。widthcanvas。heightimg。heightconstctxcanvas。getContext（2d）ctx。drawImage（img，0，0）canvas。toBlob（function（e）｛resolve（e）｝，imagepng，1）｝｝）
　　将canvas转成file
　　将canvas转成Blob，然后将Blob转成file即可，可看最开始的文件类型转换流程图。
　　或将canvas转成dataURL，然后将dataURL转成file即可，可看最开始的文件类型转换流程图。blob转arrayBuffer
　　利用FileReader。readAsArrayBuffer（）functionblobToArrayBuffer（blob，callback）｛constreadernewFileReader（）reader。readAsArrayBuffer（blob）reader。onloadfunction（）｛callback（this。result）｝｝letblobnewBlob（〔1，2，3，4，5〕）blobToArrayBuffer（blob，（arrayBuffer）｛console。log（arrayBuffer）｝）ArrayBuffer（5）
　　arrayBuffer转blob
　　利用newBlob（）functionarrayBufferToBlob（arrayBuffer，type）｛returnnewBlob（〔arrayBuffer〕，｛type｝）｝blobToArrayBuffer（newBlob（〔1，2，3，4，5〕），（arrayBuffer）｛console。log（arrayBufferToBlob（arrayBuffer，textplain））Blob｛size：5，type：textplain｝｝）
　　版权声明：本文为CSDN博主定栓的原创文章，遵循CC4。0BYSA版权协议，转载请附上原文出处链接及本声明。
　　原文链接：https：blog。csdn。netweixin44116302articledetails122064841