2013-07-17 275 views
1

當我在頁面上按ctrl+v時,我試圖從剪貼板獲取圖像,代碼爲a gist,它將獲取圖像內容console.log如何在Dart中解碼base64字符串的圖像?

我發現圖像內容是一個長期的base64字符串帶有特殊前綴:

data:image/png;base64,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 

如何將其解碼爲二進制?我嘗試刪除前綴data:image/png;base64,,並使用base64庫將其餘部分解碼爲二進制文件,並將其保存爲image.png文件。但該文件無法顯示,invalid format錯誤。

但是,如果我粘貼整個字符串到http://base64online.org/decode/,它也可以播放圖像。

我用的基於64庫爲https://github.com/wstrange/base64,我的代碼是:

import 'package:base64_codec/base64_codec.dart'; 

var body = /* the long str above */; 

var prefix = "data:image/png;base64,"; 
var bStr = body.substring(prefix.length); 
var bs = Base64Codec.codec.decodeList(bStr.codeUnits); 
var file = new File("image.png"); 
file.writeAsBytesSync(bs); 

我不知道哪裏錯了:(

回答

4

嘗試使用距離Dart SDK的crypto包這將創建。打開精美的image.png(我相信這是這一形象... enter image description here

library foo; 

import 'package:crypto/crypto.dart'; 
import 'dart:io'; 

void main() { 

    var body = "data:image/png;base64,iVBORw0KGgoAAAANSUh... snip"; 
    var prefix = "data:image/png;base64,"; 
    var bStr = body.substring(prefix.length); 
    var bytes = CryptoUtils.base64StringToBytes(bStr); // using CryptoUtils from Dart SDK 
    var file = new File("image.png"); 
    file.writeAsBytesSync(bytes); 
} 

你需要添加cryptoŧ Ø您pubspec.yaml

dependencies: 
    crypto: any 

https://github.com/wstrange/base64鏈接的庫,還指出在解說:

棄用

注:飛鏢SDK現在包含一個Base64編碼解碼器與URL的安全選項。除非您需要流式支持,否則您應該使用SDK方法,因爲它們稍微快一點。

見CryptoUtils

參見How to native convert string -> base64 and base64 -> string

2

解碼爲一個字符串,然後寫字節的工作原理:

var prefix = "data:image/png;base64,"; 
var bStr = body.substring(prefix.length); 
var bs = Base64Codec.codec.decodeString(bStr); 
var file = new File("image.png"); 
file.writeAsBytesSync(bs.codeUnits); 
+0

謝謝你,它的工作原理,我知道是我錯了。但是由於克里斯的回答是一個更好的解決方案,所以我接受他的。再次感謝〜 – Freewind