javascript - 如何将 webp 数据 URI 转换为 png

标签 javascript image-processing image-conversion webp

我已使用 WePJSwebp 图像转换为 png在飞行中。但该库仅适用于像“abc.webp”这样的图像文件。它不会将 "data:image/webp;base64,UklGRvYRAABXRUJQ....." 制作的 webp 图像转换为 png 图像。

还有其他方法/框架可以得到我需要的结果吗?

例如,下面的示例在 Chrome 中有效,但在 Firefox 中无效

(function(){
  var WebP=new Image();
  WebP.src="data:image/webp;base64,UklGRvYRAABXRUJQVlA4IOoRAAAQgQCdASpAAfAAPu1qrlEppaQqqXIMIVAdiWUHDODHxFjwOctUkVXfTu1UpVUx/8lcT9b44Nz547X6Nn7QXa4dE58x2yL9IRGF4LD3X1pNIIC8qvPaDVDfcOj3EjGc+T9JhNJF+L/SM7sk8BKuDSa9HYiOOPGixk0tWnhAPbVsTW2lc62I2xRGGbcjPJKjDUzadFCmB0hIFFWlTLKi6sBE/xkHbn/zbCr3pURqob/vE5mte/EjzeKcS7diP0QXZTbqEAHxHsKHICWbCjPQ2ZIUZ5Csu45dJ/hH/Gj1zF+R11M6P6dOpmpLZC+Fpv7dzbE08zm01ZOyOyXMBFoIJoB9bUmXZNfuYe4DuIGJrHH9Jw5K5Xp4m8dprR3hyErtiuNMK59cK4Ku0JyhQbrWURbQWFTbNvFk8hjBOOdBQPO/mJHMyHw/tSsFM6E+2yhGFDXnR9uYL+TCkGjo9JUE/2e7zJ9mLHS4ut+NkkDBQO7qJfJhYf1/PK5wUyAKc8oyhSCNBs28xKg/624mNhmQQhARg9qbZD8l8GiKnton/U3MCwVr81c0+6xKrGWYKYJGvRyVRj5TqwwbQPdrek7/hyhW/YNEYYY/BPljajvona6v3h+Q9faJtzqv0HBqITCFbKrXaFF0IZhlZZ4jLfL9h7kZ+I9tAUwxyeFWEpzl0+yDzOaJkwIAEshOQvZ3LsV5EIj/sysyOYDHhKKcVHPgGLHGq6g4OHovginNIHs08DpGFRfG7DG7MEF835uLXSHASXMdFpjHe3yp8NWYyVAqKfzrxU1tNQDkbezkHfcXRibTbHIlnxeP8sLv/hL7MRWyH/OoGNm+lok41jGTBlv0eZVrBXpx5r+xyBRdPkex0lGJ/8vIv3sxlqbtlNRQiYPxegDfWdB08OQxiodBeCg+3sQ+Ioz8uqZyD4qRwmc+VVRPqbrje6EYyWr1FKd9SGc5t1jazbJGOgP0BnGtwDqobPC31OL2WDzsRV3My3CVHB/rmxdKHtt5n9OTHIfXevQ4d6V0Lu17jtj7QRiWKQ9ng9dBDLWbEhrWpVqQHy+Mvi+1uOnCttaWZuLYlClRaelCzuwKujZVwLqr6Q9NLdl5cJrD0D93GzJ0Oo9c2hWzKubTKI1VIhbCzjKrByoOb6wqF8hugjuM13BD91oF3k8h9aCdzBnH11WDzrXTs1rOyorkgdXqPrh+YIGyVMEhmSp3h5XUfgyB6eb0+sYBtoyMPdH1MEVZc+wm4YfdtC3vybMbmYfPh8xqZN/HSHYM3iQjOMIPZf0Ti/skETcLATL5iHSbafYk2rrMW6dGdFnVlOI91WhI/kIGD6eS3QoC66Mnynnik1TWC14Zb+0YZVx416hMGKpz5VbzDAq9+Wa/p6KJ+wAA/lLAEKzfgLtxwhb+F7Jhs5nLFjX+BZ46VX9LM9kGwu9t0n85MVsgKlPSYzCUWoDbaQdPoQZ5cRRQshrOddX44Q52/gMIZW1dl34XkLfHY3J1PM4SpUsyJrbgXSVxl57+JsP+DnB1gtSlKIVhYDVNyfU/md1BCBHALuZ/fDi8ckfKqofdnwacQ96yFJA22Pm2/DwWkW8azjxTLId9GfoXib9oBGik3FvtPgTrMA0p4QuWbYe04sLtTQPcraFqMuLE2Ro/E0P9tzwGKZ01GmZ5mHaATWYHMc4bPiKZl1fytaD0e1PcJGa9E20ekzTvSRQ+HNRTLUXOEoNnj511ncV3VNBXMcKdr+AvtWJLRpRVVJp796mDKCmfl+W2hjlpNmP+fby5ywd/iFdDQ9OyhX4YoiyuScW4hv1t9U+FJx3RlL2BNNvwnSnafpl2cT2eIKVwLh/m32OQwQnjSJCXeIy5OUIuA6+Iw0tMKer3KSgc+BfP9CcpFtWz3XtSrQFM17mulp1vWBpEtShcORhOBK90upcXKceTqFO8HfaTNi00m1fRmJ/mEpFkBjO/gSjD9hjYAR5Fj0YWeNsS289AYXPZTiabsGnhPUVKqd4iYpPEkSJs8kAgDEV6XNYpauR3P8vFu0YaKPt6VSWQMIZtq6NPbLUqJqUF5i4lG2cNbwOfQrgfFMQGgrHUPIOAuEsRrdyZdUukhX+GY/YUeitM8nsDRKfM17vGN/OaAlVfm+VF6mDFsoIY3dLp0Pi5+qXk8RlgixGUMRu7UuiO4dfMcfNCuZv0Irmz1IFPIaOIJTX+lUWwdqQzlpQjE2QxjHgNQlX7vpR5i6MHvXxaZf1AH56Gva1oHorMg4Rye6lvdEKnUDmOJtBk3RISiwnoOB5Ksuh87R/ZUU4IzQfu1pPZH+xgPIkc7nken2ZuzUAgimJm7tQFP05WoTYgZ4mY13hEljDeDhTJPhn6OyLcIlvm35Fg4fP0rKVTSErKswN0ihk42voIoeOzLDrjGqYiy+O0X2Sfzppb8RGCTWEV7/qaH+s+sUyh9cp6Y9mVKikIIru+mynbAq7SoqJweHCxQJP3R2A59U30CMPMfVNC9lpdtJG3HunRC5CCufmoWP4Nvgy/XLlHFC36jubjv8iJXL/407CenAHjfUyyU9JVK8WYN3GtUiFBpnNnllLuUMP8Do5Zyj9JBPwzEFRY9sgX0FfSESnBekctpISjvKrrgLF079uhqqiT22nSgGKS6k/PhhE+wAY92jiL1lZJ34SXVyf1pomkiuBUpMHLJXiA+fccY+WcW+zVcFGSg234AtcINs5DQp9prj0lG9RoG1EqQevHdZOMcODFKrqTpGMCDBPA18Lhgh8PnvmgQELD+efTwwHemdk1sjidNbWLC5y+t+Eq3TUghseDT300Zk0Uet6Hm0YYSpBFlr8uWmZ1RdRirkEaQkDf6v2V5ylXI6XkKAL6TBu6iGXAo6cO6UOjaK8WlGGf8b6chad9KQbi7n1KFPfZQFpTFxkdulaC1WAT6UF+oAfJgkGb1FJGtNYyVVB9ifU/C6xYrmvjsWuYFPvR7wwi7t6h9kmBDCdGGg07lh3GrXFBVkL/XdB0YVKb2tGfpy8zlnGbkgu40914XZSCFE10WfbXXS5cjg4J4BGXUZk5afFD9upgAN6vivrCZ8FoIwb1RBB8TbUx45UjvafENEXWPFIbuJBlaIcW1/mTx6yce0SX2DRym5PcZ1AnCCSzPKAJaYD/r4sGhMzgYcS0at3QY2mNBPEVjI3T0anE8MiZM8IA5lcgPAWJrS8CdXVPZF9q0kLvoQsTWlKlrX+f/R6v21/Ga2K7YEsnau99e1KIgGyEokeXv6QoQ6XbMhDsdqca7jimhLF9/L7oYzZC8PMskUiReiCEIJtJWCMxcqEMATg8dD2yGmkVadj5o7beeOzP1DDXY9sGKzlAV8X9hMIufpnZ2J+KKCylozxQY6I+o1ZvzjbOhTbkLhxlxPu/aTmvSdrzW51MYKjg3pGsV5Rul5ays7mNCaX2XHmvzQWUEKqyIvkIo58+bpfOxIqLzy8AjY/ib0rNk4piE0Y+rvsACbYeYStrfFPWA44AWg8aj2I8lElOQkQX7iAHAr4VuODsvfT4jOZAtzqp20LxoEcIJPlHRK3UzJK5ESa+tEmk/zY8ERBNjgSiZHZdtY0JrFHLvFVt9MDrIPPyQf5AN0P9ufDdX6JBerRdJ4kLm5CJ2W27Sxs1mb33KZPICuONFCx6zAnkO3+xzZxO15Ms7GO2iOoEen5y5mUwEpsh9Xj/UCTkI3fq3qcudErWrIIACB0h6I0uJdU7OG9KUipi4/FcM8Kvu1KeoJ+flwMoxG2BDsZHnrjTKTbX8S3GZB6P6IUY25lDvFQwwnoY/v+VWbgWwEafY1togeY6Pbsh4N/aNhRIjj1nev+Q17ILj9rRJNY6QyKRQE2qIqwdBF1XBg9bbWkFrx8sa1Vzg/+excEx8WJvjyTns9QzGklrqlFx16JKZ+UiLzj73Pvie18GWEza22WkcFFu0cZsVgDHZe1NYP033eXkNcOCfZyOw/Z5NulMNyGuFq7cJGJmXLwyWi3JG/41Y2baoV3siJ0Cc3olLXO1+mqxtgTY/FnoB1yBniP/5x4iWieoHT8jniCthS5U/M2irN0SKFyoo9BGHYOrzsmFpvgjIEgDBBnPvzh1mg64QfbA4pqOnLBrWGg3YcM2HewieKV7lbsnZ4p4q2WxSKOXDLY5K+f/TSUxmg8hQGNhJbHe6F1tv2igtZ8bVPr2h82d0hQ3gMBFN5GWWiSsirHozUOSLhdsq24r8tbJnZy5dhic0Rgg3jSaehCsLv6XXaBR6uheSc6z9DE1OYCdIeb8THNx5zPQRH3sTWreKrDub+8h+WB98KX6rav7hLB0jkREDaK2ky2j81BhNB2glI3UaCtBDRpLkwDXWgLKHGWKAzCZjfhFLcW191UyPYpk/8s//OgeGGp4CDkS/H5WZtFlPmp5WED/J5Ecsd369Qs9NFmjGxzhPUosTj/niaF38woDvCxb0JTlrckCqQSs69fnEim1RJHiBl/APxj4siDy55yq7Xh0elJJRgA5j26tyfK6CBj3yaTF0qOxVg5gUSlW19E+GNT1sFlIRVzXhdx225ZmNJIXC+1YCKIElbeCXPWII6YAnuSl1YVyUHDHy018Q/QDIG8UILOTdpc5qv5d4eZ4pAyhtOPgxYCip5vS63XTw/K4fvtE5ciyAfo7yEUY0AobY+XeJVv2oKLamxkXC4fb0hp+9O+3PG/yOkRJt3P6xNDqquTFQkGdD9hcojo5izZI65TPyTsUiZEKdcpB8pYpgUKzBCaigDmXo47nFQTOHmrREiR+6m/EKAetDpxiLxbFdmhfYr316kTEOE/mcmsodG+j0Yo5h0qtsPHQ1M+NVFipN2DpKe0VE5HXg8ZD8/S0wUdbha6YiQe6ycqdJD88dM3mUL6PBo1lfMkiu4jSbjq16wqIBJWdBVQMf4vr26+Fi+0KeDfHfMaEBuwioLYbEMY192acx6epBeuha6YfqVHKQX1BXLqHoYvHghyzQavv/5Wlalb2BWOkV86N2+cZ7CA4rCwaXNrWsDJTN/D8XBmfmFY9fff+IzkBsGiG91wEXJfsdLhevVDPcZC0IUqo5ifuxcLdPBYidAADn+yj4kryRWiGl6cv3WcJxuT7kEar/FDtqSzy+tEShKIXvZQ0Tcd+03qlyPxLhoMzmZ1GO0sNu1ophGUhMzmHdrzCg24F9W2UdOutlYF7t7/b3pc3mf2xOdpTcSJC41IzS8cGZy8KFbl63WKZPZ9Ye4KYRybVl/0eND5+4eFMkxYjZFvz6NwpWaHXM2ExMARadPCSBGiw1iyr5nNxfFJrEt7Uwxq4E95Red8ZY3I2GNlREsV0GZA2rQVEavhXAUsgmlbDsdtsZ/Wp7rXF0gP9vGJiOft8HTo/QMZCMa+00vLDhXv7kWlA+fAJbg9kkrrrJl905nwr04WszT0mshOrA5MwmIbV1cIE5G858I65iiHjqO9ZSdV6TvZtr3X56nL8npst3L7I4CK9RUumdzHt5UrIsmboGpktXyPq9bwkKD+WQc6fZsEUZ8UM6ujGKrLaHnudaRueCv1gct+i+NpL+w8/dskkk8vbkZ+BMXg9YYPxAFAISrsVyfEjyz7eWLHNR8pE9T2EDlLO3RS9RGcG9Tu78jz753nv9e7tYxwmLZBQ6LBA6oXU0sCnJX30ZEH4NEP5agcrE+I5HgwHHO4joo9hypjxhWUsF/0/LbYZ9ZS1f8kO4A7spM1uS5HQLehTavjrN6MUt+0ggcTATy5CQmuM6asEWHyLwPUJOiHAQ65wK6psFInjDqFTG8RRBTOOfbWKqkLn8NKU2FQud8w+8FA8VIjK0x0LbJCuLkzXoeKrKzH+5YGBEgKkjYW3urnqIe16fEXLOG3GNPaS6X3CxCVVLusokPAFNvGB8ag4O5d/jT/j6Tt4jz/dQoMLfDJp7C5Tj9bso0HBngWjPXXQJ1RTdo9998wPw30oaWfvGQF+NZSdzF8zCrHJBDX6Ahz3waXxrxXfy72J3H7sSkLVANdzLafd0QYaj798sx/4F8RdkhJ/Sm46E4dD17p51e8bC3LnhJPkDQrI2xMl1zoo/J8fU2yW5e+sadNZgjifZ2DWZKBRiBveRRagHXwI2XslZ3VlYIeINAAAAA==";
  document.getElementById('imageWrapper').appendChild(WebP);
})();
<div id="imageWrapper"></div>

最佳答案

ImageMagick听起来像是您需要的瑞士军刀。

关于javascript - 如何将 webp 数据 URI 转换为 png,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40337875/

相关文章:

javascript - 如何在一个循环中组合/合并/相交两个对象数组?

javascript - jQuery:使用 ToggleClass 编写 super 菜单

image-manipulation - 如何在将 eps 文件转换为 jpeg 或 png 时更改其背景颜色

java - 如何在java中将具有以下扩展名的图像转换为.TIFF:jpg、pdf、gif、xls、xlsx、doc、docx、rtf、bmp、jpeg、csv?

python - 使用 Pillow 从 CMYK 转换为 RGB 与 Photoshop 不同

javascript - 仅使用 Javascript 隐藏/显示元素而不干扰 DOM

javascript - 从 PhoneGap Camera API 返回时如何隐藏 iOS7 状态栏?

opencv - findContours 寻找 Blob

r - 在 R 中更改图像像素颜色并保存图像

Java 图像连接组件