Buildfire - ウィジェットに画像を保存

Question

私はユーザーがウィジェットを使って画像を保存できるようにしようとしています。私は、以下の機能を使用しています：

buildfire.services.camera.getPicture({}, 
    function (err, imageData) { 
    if (imageData) { 
     document.getElementById("imgPic").src = imageData; 
    } else { 
     console.log("no image selected: " + err); 
    } 
    } 
); 

画像データを利用者の携帯電話からのローカルリンクで結果、何かのように：

file:///storage/emulated/0/Android/data/com.buildfire.previewer/cache/1503099575571.jpg 

私はリサイザー（buildfire.imageLibを通してそれを実行した場合.resizeImage）私はこのような何かを得る：このリンクは安全である

http://czi3m2qn.cloudimg.io/s/width/1600/file:///storage/emulated/0/Android/data/com.buildfire.previewer/cache/1503104990327.jpg 

わからない場合またはgそれならば後で収集されるガベージコレクション

カメラがビルファファイアのデータベースに実際にかかるイメージを保存するにはどうすればよいですか？

EDIT：

あなたが示唆したように、私は私の画像を保存するためにhtml2canvasを使用しています。私はDOMに私のローカルイメージをロードし、私が保存しようとする前に、私はこのようにそれを処理：

onrendered: canvas => { 
    const img = canvas.toDataURL(); 
    imageList.push(img); 
} 

私のイメージは、キャンバスになって、その後、私はtoDataURLを実行します（）。しかし、この非常に長い画像データ文字列を保存しようとすると保存されません。私はbuildfireするためにそれを保存する前に、あなたが私のデータを見ることができる最初のピンク色のボックスで

。 2番目のピンクのボックスには、ビルドファイアのクエリの結果が表示されます。エラーは発生しませんでしたが、の画像のデータは保存されませんでした。データが正常に保存されたことを確認するために、ティールボックスはお互いに一致します。文字列が保存するには大きすぎるようですか？

Answer 1

残念ながら、これはうまくいきません。これが理由です。 BuildFireはイメージ操作サーバーを使用して、イメージがダウンロードされる前にこれらの変更を行います。そのため、Image ManipulationサーバーにURLを送ってRawイメージにURLを送信し、サイズを変更することができます。ただし、あなたのイメージはローカルなので、Image Serverがそのイメージにアクセスする方法はありません。

より良いアプローチは、ここではHTML5のキャンバス

を使用して、ローカルの実装を使用している実装例である：

if (localURL) { 
    var img = new Image(); 
    img.src = localURL; 
    img.onload = function() { 

     if (options.width && !options.height) 
      options.height = (img.height * options.width)/img.width; 
     else if (!options.width && options.height) 
      options.width = (img.width * options.height)/img.width; 

     var canvas = document.createElement('canvas'); 
     var ctx = canvas.getContext('2d'); 
     canvas.width = options.width; 
     canvas.height = options.height; 


     ctx.drawImage(img, 0, 0, options.width, options.height); 

     callback(null, canvas.toDataURL()); 
    }; 
    img.onerror = function() { 
     callback(null, buildfire.imageLib.resizeImage(url, options)); 
    } 
} 

crop

実装はリサイズよりも複雑です。しかし、これはただ明確にする