Javascript 从base64 PNG获取高度和宽度尺寸

我有这个

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOcAAABnCAYAAAD7RFX4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAUNJREFUeNrs2sEJwkAQhtF/xAa8WZrYgODBEoS04MkKPFqXXax3IZhL2BXfq2AZ8mVC2Mp0b+FTJUm7nkyCbjZGAOIExAniBMQJ4gTECYgTxAmIE8QJiBMQJ4gTECeIExAniBMQJyBOECcgThAnIE5AnCBOQJwgTkCcIE5AnIA4QZyAOEGcgDgBcYI4AXGCOAFxgjgBcQLiBHEC4gRxAuIExAniBMQJ4gTECYgTxAmIE8QJiBPECYgTECeIExAniBMQJyBOECcgThAnsL5tkjIGGDNOZhxve0Ogm2qtjfetPZ2HOMdh9/SEYHPO6PXmqAHOwJ/zQwjECYgTxAmIE8QJiBMQJ/wa1/e+c/cYmxOwORd5XF6GgM0JiBPECYgTxAmIE8QJiBMQJ4gTECeIExAnIE4QJyBOECcgTiBvAAAA//8DALxSDtah/q5yAAAAAElFTkSuQmCC

我想使用JavaScript从这个字符串中获取高度和宽度。我该怎么做？有可能吗

您可以假设使用jQuery访问jQuery、window.btoa和window.atob。

：

var width, height;
$('<img/>').load(function(){
    width = $(this).width();
    height = $(this).height();
    // Call whatever function here that requires the width/height
}).attr('src', datauri)

var宽度、高度；
$（“我确信可以通过某种方式从PNG中解析它，但是假设数据URI支持（因为我们可以假设
atob
），您只需创建一个图像并等待它加载（这在任何格式下都适用）：



好的，显然您希望手动提取此信息。PNG文件以字节
89 50 4E 47 0D 01 1A 0A
开始，然后是包含宽度和高度的IHDR区块，必须是第一个区块。（耶，更简单！）区块的长度为4字节，类型为4字节，内容为长度字节。IHDR的内容以4字节的宽度和4字节的高度开始，因此PNG的宽度和高度始终为字节16–24！如果您愿意，可以检查所有内容，但有一种简单的方法假设PNG有效：


函数到Int32（字节）{
返回（字节[0]8，当前和0xff）；
电流=0；
}
}
如果（i%4==1）{
抛出新的SyntaxError（'Base64字符串的长度无效'）；
}
如果（i%4==2）{
结果.推送（当前>>4）；
}else if（i%4==3）{
电流16，（电流&0xff00）>>8）；
}
返回结果；
}
函数getPngDimensions（dataUri）{
if（dataUri.substring（0,22）！='data:image/png；base64'）{
抛出新错误（“不支持的数据URI格式”）；
}
//32个base64字符编码所需的24个字节
返回getDimensions（base64Decode（dataUri.substr（22,32））；
}
变量维度=getPngDimensions（'数据：图像/png；base64，IVBorW0KgoaaAnsuhueugaaocaabencaaaD7RFX4aacXbacXmaaaa2LDQ1BqAg90B3Nob3AgsUndihbyB2 ZpGuaahjanVNvFpFpJ333VRCS4IAletVuIfjIfIfIfIfIfIfIfIfIfIfIfIfQQsogHodkVucerrue8IfIfAfAfAfAfAfAfAfAfAfAfAfAfAfAfAfAf8+JbJbBfBfBfBfBfAfAfAfAfAfAfAfAfAf8BfAfAfAfAfAfAfAfAfAfAfAfAfAfA2.C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C6月6日，中国政府发布了一份新的研究报告，该报告的内容包括：AV/8+8/8/PF14-7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 7 7 7 7 7 7 7 7 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 GJGXmyx4.B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B KNWJACAT4U+IoUspq2.中国政府将其作为一个新的目标。中国政府将其作为一个新的一个目标。中国政府将其作为一个ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZJ8H45HX+JX0TGNNKEX836K32.在中国的一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个城市，一个，或者或者或者或者或者或者或者或者或者或者或者或者或者CRP7LOK06RNTZNW7DXTSM2QB2.中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的中国的中国的中国的中国的一个中国的中国的一个中国的一个中国的一个中国的中国的一个中国的中国的中国的一个中国的中国的中国的中国的中国的中国的中国的的WL7+Hp8Ib+OPZRBZFAY2E1BJKC5QRVBJ4KTGUXBRSFYOY一个新的一个新的概念是什么，一个新的概念是什么，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的概念，一个新的领域，一个新的，一个新的领域，一个新的，新的领域，一个新的一个新的领域，新的领域，新的领域，新的，新的，新的，新的1YOHSMDLV2A/zYnK2.这两个词的意思是一个词的意思是一个词的意思是一个词的意思是一个词的意思是一个词的意思是一个vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SP6月6日，中国政府对2月2日的中国政府对2月2日的中国政府对2月2日的中国政府对2月2日的中国政府对2月2日的中国政府对2月2日的中国政府对6月6日的中国政府对6月6月6日的中国政府对6月6日的中国政府对6月6日的中国政府对6月6日的中国政府对2月2日的中国政府对6月2日的中国政府对6月6日的中国政府对8月6日的中国政府对8月6月6日的中国政府对8月6月6日的中国政府对8月6日的中国政府对8月6日的中国政府对8月6日的中国政府对8月6日的中国政府对6日的中国政府对6月6月6日的中国政府的中国政府对6月6月6日的中国政府对6月6月6月6月6日的中国政府的军队军队军队军队的6月6日的6日的中国政府的V+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDY6.我/我的vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv6+vvvvvvvvv6+vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv4GTECEIExaniBMQJYBOECCGTHANIE5ANCBOQJWGTKCCIE5ANIA4QZYAOEGCGDGBCYI4AXGCOAFXGJGBCQLIBRIBHEC4GRXAEXAIEXAMQJJJJJJJJJYBECCGTHANSL5TKJIGGNOZHXVE0OGM2QTJFETPZ2HOMDH9/SEYHPO6PXmqAHOwJ/ZQQQWJJJJJJJJXAEXAIEXAMQJ/wa1/e+c/c/CYMXOWORD5F6GGM0JIBYPECTXAEX8F6GGM0KKKK8QQJJJJJJJJYBEXAEXAEXAEXAEX8GMJJJJJJJJ8GMJJJJJ8CFCFCFCF8GM8JAB8JAB8JAB8GMK8；
console.log（dimensions.width+'×'+dimensions.heigh
var image = document.createElement('img');

image.addEventListener('load', function() {
    // image.width × image.height
});

image.src = 'data:image/png;base64,…';

var imgData = 'data:image/png;base64,iVBORw0.........';    
var img = new Image();       
img.onload = function(){
  alert(img.width +' '+ img.height );
};
img.src = imgData;

function getPNGSize (buffer) {
  if (buffer.toString('ascii', 12, 16) === 'CgBI') {
    return {
      'width': buffer.readUInt32BE(32),
      'height': buffer.readUInt32BE(36)
    };
  }
  return {
    'width': buffer.readUInt32BE(16),
    'height': buffer.readUInt32BE(20)
  };
}
getPNGSize(buffer)