JavaScript 二进制转文件
使用js将blob对象转file对象
前端处理后端返回的二进制流文件
上传的文件对象
完整代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript 二进制转文件</title>
</head>
<body></body>
</html>
<script>
var two_obj = {0: 137,1: 80,2: 78,3: 71,4: 13,5: 10,6: 26,7: 10,8: 0,9: 0,10: 0,11: 13,12: 73,13: 72,14: 68,15: 82,16: 0,17: 0,18: 0,19: 38,20: 0,21: 0,22: 0,23: 38,24: 8,25: 6,26: 0,27: 0,28: 0,29: 168,30: 61,31: 233,32: 174,33: 0,34: 0,35: 0,36: 1,37: 115,38: 82,39: 71,40: 66,41: 0,42: 174,43: 206,44: 28,45: 233,46: 0,47: 0,48: 3,49: 217,50: 73,51: 68,52: 65,53: 84,54: 88,55: 9,56: 237,57: 88,58: 61,59: 104,60: 83,61: 81,62: 20,63: 206,64: 75,65: 155,66: 168,67: 196,68: 132,69: 42,70: 116,71: 113,72: 139,73: 161,74: 53,75: 33,76: 54,77: 17,78: 28,79: 170,80: 110,81: 130,82: 32,83: 88,84: 12,85: 85,86: 220,87: 28,88: 237,89: 228,90: 32,91: 34,92: 14,93: 106,94: 93,95: 181,96: 14,97: 90,98: 138,99: 131,100: 96,101: 81,102: 55,103: 87,104: 193,105: 150,106: 58,107: 137,108: 14,109: 130,110: 216,111: 193,112: 161,113: 169,114: 37,115: 49,116: 181,117: 20,118: 44,119: 20,120: 116,121: 168,122: 145,123: 40,124: 104,125: 210,126: 31,127: 191,128: 239,129: 113,130: 239,131: 243,132: 229,133: 253,134: 228,135: 221,136: 247,137: 218,138: 102,139: 234,140: 133,141: 147,142: 115,143: 207,144: 185,145: 231,146: 124,147: 231,148: 123,149: 247,150: 231,151: 253,152: 36,153: 20,154: 218,155: 105,156: 59,157: 51,158: 96,159: 159,160: 129,161: 249,162: 249,163: 249,164: 93,165: 20,166: 251,167: 136,168: 127,169: 143,170: 230,171: 63,172: 229,173: 127,174: 198,175: 236,176: 236,177: 108,178: 110,179: 125,180: 125,181: 253,182: 188,183: 166,184: 105,185: 103,186: 224,187: 77,188: 109,189: 108,190: 108,191: 236,192: 231,193: 40,194: 236,195: 21,196: 168,197: 5,198: 216,199: 175,200: 194,201: 225,202: 240,203: 139,204: 190,205: 190,206: 190,207: 34,208: 253,209: 126,210: 90,211: 32,212: 98,213: 32,214: 148,215: 65,216: 209,217: 123,218: 144,219: 130,220: 74,221: 49,222: 16,223: 157,224: 128,225: 220,226: 0,227: 193,228: 146,229: 74,230: 60,231: 99,232: 124,233: 19,234: 155,235: 153,236: 153,237: 25,238: 66,239: 222,240: 35,241: 72,242: 68,243: 7,244: 208,245: 180,246: 63,247: 32,248: 248,249: 26,250: 133,251: 167,252: 33,253: 203,254: 244,255: 193,256: 62,257: 0,258: 233,259: 135,260: 125,261: 10,262: 122,263: 55,264: 125,265: 104,266: 13,267: 200,268: 229,269: 124,270: 62,271: 255,272: 68,273: 183,274: 60,275: 126,276: 124,277: 17,278: 3,279: 169,280: 187,281: 192,282: 187,283: 73,284: 76,285: 20,286: 253,287: 5,288: 185,289: 31,290: 137,291: 68,292: 70,293: 211,294: 233,295: 116,296: 205,297: 169,298: 78,299: 185,300: 92,301: 142,302: 55,303: 26,304: 141,305: 107,306: 32,307: 119,308: 29,309: 178,310: 87,311: 196,312: 140,313: 128,314: 220,315: 45,316: 167,317: 120,318: 179,319: 79,320: 153,321: 24,322: 150,323: 239,324: 18,325: 246,326: 147,327: 126,328: 181,329: 32,330: 84,331: 130,332: 156,333: 197,334: 210,335: 44,336: 152,337: 193,338: 220,339: 250,340: 200,341: 229,342: 254,343: 155,344: 132,345: 100,346: 24,347: 131,348: 125,349: 55,350: 132,351: 220,352: 167,353: 110,354: 241,355: 244,356: 43,357: 17,358: 43,359: 22,360: 139,361: 105,362: 128,363: 114,364: 3,365: 71,366: 72,367: 42,368: 30,369: 143,370: 159,371: 72,372: 38,373: 147,374: 213,375: 86,376: 192,377: 214,378: 177,379: 197,380: 197,381: 197,382: 174,383: 90,384: 173,385: 246,386: 158,387: 228,388: 128,389: 81,390: 199,391: 120,392: 62,393: 151,394: 203,395: 149,396: 173,397: 113,398: 210,399: 14,400: 203,401: 142,402: 135,403: 30,404: 193,405: 56,406: 247,407: 212,408: 239,409: 142,410: 142,411: 142,412: 130,413: 95,414: 82,415: 196,416: 102,417: 14,418: 115,419: 137,420: 1,421: 114,422: 81,423: 104,424: 98,425: 186,426: 54,427: 79,428: 98,429: 115,430: 115,431: 115,432: 89,433: 0,434: 13,435: 18,436: 1,437: 87,438: 250,439: 32,440: 155,441: 205,442: 126,443: 113,444: 69,445: 243,446: 24,447: 96,448: 46,449: 49,450: 24,451: 70,452: 76,453: 98,454: 187,455: 165,456: 120,457: 18,458: 91,459: 91,460: 91,461: 59,462: 199,463: 100,464: 78,465: 127,466: 44,467: 22,468: 27,469: 117,470: 3,471: 82,472: 245,473: 19,474: 67,475: 44,476: 101,477: 72,478: 98,479: 59,480: 229,481: 122,482: 18,483: 67,484: 210,485: 0,486: 19,487: 113,488: 133,489: 111,490: 82,491: 169,492: 212,493: 79,494: 39,495: 16,496: 63,497: 62,498: 98,499: 16,500: 75,501: 228,502: 240,503: 198,504: 236,505: 216,506: 60,507: 137,508: 1,509: 228,510: 160,511: 200,512: 156,513: 118,514: 68,515: 8,516: 230,517: 148,518: 88,519: 18,520: 219,521: 134,522: 226,523: 74,524: 12,525: 132,526: 34,527: 75,528: 75,529: 75,530: 123,531: 48,532: 237,533: 221,534: 204,535: 194,536: 17,537: 255,538: 70,539: 223,540: 86,541: 8,542: 224,543: 190,544: 11,545: 38,546: 221,547: 172,548: 65,549: 76,550: 97,551: 27,552: 202,553: 118,554: 187,555: 192,556: 173,557: 225,558: 34,559: 70,560: 31,561: 34,562: 88,563: 127,564: 238,565: 25,566: 145,567: 219,568: 220,569: 193,570: 4,571: 240,572: 249,573: 122,574: 5,575: 183,576: 144,577: 231,578: 44,579: 213,580: 52,581: 99,582: 32,583: 211,584: 9,585: 121,586: 220,587: 110,588: 82,589: 36,590: 194,591: 154,592: 162,593: 118,594: 167,595: 141,596: 88,597: 165,598: 82,599: 233,600: 130,601: 51,602: 198,603: 129,604: 0,605: 109,606: 21,607: 87,608: 253,609: 142,610: 130,611: 220,612: 213,613: 0,614: 249,615: 76,616: 137,617: 9,618: 14,619: 33,620: 157,621: 93,622: 64,623: 16,624: 35,625: 13,626: 100,627: 248,628: 172,629: 60,630: 137,631: 101,632: 248,633: 72,634: 39,635: 182,636: 195,637: 81,638: 168,639: 183,640: 152,641: 129,642: 56,643: 237,644: 32,645: 173,646: 105,647: 41,648: 177,649: 193,650: 29,651: 31,652: 198,653: 10,654: 192,655: 99,656: 146,657: 20,658: 99,659: 69,660: 127,661: 76,662: 33,663: 207,664: 22,665: 34,666: 57,667: 52,668: 17,669: 235,670: 233,671: 233,672: 249,673: 43,674: 54,675: 161,676: 45,677: 161,678: 149,679: 3,680: 51,681: 243,682: 213,683: 58,684: 238,685: 228,686: 179,687: 198,688: 88,689: 109,690: 214,691: 38,692: 7,693: 250,694: 155,695: 136,696: 209,697: 1,698: 64,699: 253,700: 157,701: 138,702: 125,703: 213,704: 6,705: 192,706: 211,707: 214,708: 88,709: 39,710: 159,711: 53,712: 198,713: 106,714: 155,715: 107,716: 219,717: 136,718: 1,719: 80,720: 249,721: 45,722: 83,723: 2,724: 3,725: 240,726: 2,727: 222,728: 213,729: 174,730: 74,731: 155,732: 125,733: 250,734: 164,735: 173,736: 170,737: 205,738: 181,739: 157,740: 136,741: 77,742: 168,743: 2,744: 153,745: 227,746: 0,747: 122,748: 92,749: 218,750: 230,751: 190,752: 244,753: 169,754: 104,755: 228,756: 25,757: 181,758: 109,759: 196,760: 112,761: 165,762: 83,763: 0,764: 9,765: 122,766: 220,767: 85,768: 234,769: 187,770: 197,771: 172,772: 138,773: 218,774: 250,775: 184,776: 141,777: 24,778: 78,779: 212,780: 15,781: 140,782: 24,783: 204,784: 221,785: 80,786: 182,787: 193,788: 255,789: 82,790: 212,791: 118,792: 38,793: 70,794: 47,795: 166,796: 116,797: 24,798: 170,799: 157,800: 179,801: 198,802: 155,803: 243,804: 109,805: 157,806: 145,807: 248,808: 177,809: 205,810: 24,811: 253,812: 96,813: 94,814: 70,815: 224,816: 51,817: 115,818: 160,819: 66,820: 63,821: 143,822: 165,823: 208,824: 132,825: 28,826: 81,827: 136,828: 55,829: 66,830: 88,831: 139,832: 53,833: 13,834: 7,835: 58,836: 182,837: 135,838: 184,839: 28,840: 20,841: 239,842: 232,843: 31,844: 80,845: 232,846: 144,847: 244,848: 41,849: 232,850: 79,851: 34,852: 230,853: 176,854: 66,855: 172,856: 30,857: 2,858: 82,859: 159,860: 241,861: 13,862: 113,863: 44,864: 105,865: 249,866: 134,867: 112,868: 37,869: 198,870: 172,871: 82,872: 169,873: 212,874: 91,875: 175,876: 215,877: 249,878: 238,879: 196,880: 103,881: 232,882: 118,883: 180,884: 106,885: 52,886: 26,887: 237,888: 207,889: 100,890: 50,891: 21,892: 43,893: 184,894: 227,895: 82,896: 202,897: 32,898: 38,899: 224,900: 138,901: 6,902: 97,903: 87,904: 165,905: 111,906: 11,907: 117,908: 149,909: 216,910: 78,911: 164,912: 88,913: 163,914: 229,915: 140,916: 73,917: 18,918: 98,919: 230,920: 38,921: 97,922: 247,923: 74,924: 223,925: 102,926: 52,927: 151,928: 15,929: 31,930: 202,931: 5,932: 55,933: 82,934: 196,935: 110,936: 57,937: 99,938: 178,939: 56,940: 1,941: 18,942: 137,943: 4,944: 63,945: 249,946: 199,947: 225,948: 219,949: 204,950: 105,951: 229,952: 233,953: 27,954: 231,955: 158,956: 106,957: 69,958: 138,959: 117,960: 149,961: 102,962: 76,963: 18,964: 164,965: 22,966: 31,967: 191,968: 119,969: 208,970: 229,971: 55,972: 162,973: 234,974: 107,975: 19,976: 47,977: 134,978: 127,979: 172,980: 12,981: 91,982: 79,983: 31,984: 252,985: 142,986: 205,987: 55,988: 49,989: 137,990: 2,991: 130,992: 251,993: 80,994: 104,995: 0,996: 167,997: 182,998: 0,999: 225,1000: 215,1001: 53,1002: 255,1003: 72,1004: 209,1005: 95,1006: 199,1007: 209,1008: 95,1009: 65,1010: 127,1011: 25,1012: 154,1013: 127,1014: 37,1015: 76,1016: 160,1017: 63,1018: 101,1019: 190,1020: 121,1021: 74,1022: 140,1023: 182,1024: 233,1025: 173,1026: 252,1027: 227,1028: 174,1029: 109,1030: 164,1031: 253,1032: 22,1033: 250,1034: 7,1035: 195,1036: 1,1037: 181,1038: 72,1039: 49,1040: 32,1041: 229,1042: 123,1043: 0,1044: 0,1045: 0,1046: 0,1047: 73,1048: 69,1049: 78,1050: 68,1051: 174,1052: 66,1053: 96,1054: 130,
};
// 首先将对象转换成普通数组 得到长度
var cacheArr = new Array();
for (let i in two_obj) {
cacheArr[i] = two_obj[i];
}
var len = cacheArr.length;
// 构造ArrayBuffer 并通过Uint8Array的实例来对其修改 将普通的数组转成ArrayBuffer数组
var buffer = new ArrayBuffer(len);
var arr = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
arr[i] = cacheArr[i];
}
// ============================================================
var data = new Blob([arr], { type: "image/png" });
var downloadUrl = window.URL.createObjectURL(data);
console.log(downloadUrl, data);
// blob对象转File对象
const files = new window.File([data], "图片", { type: data.type });
console.log(files);
// 实现下载
// var result = document.getElementById("result");
// var anchor = document.createElement("a");
// anchor.href = downloadUrl;
// anchor.download = "钥匙.png";
// anchor.click();
// window.URL.revokeObjectURL(data);
</script>
实际项目中: 后端返回图片的二进制流 而不是图片地址
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
