1

私は PhoneGap を使用して Android で開発されたプロジェクトに取り組んでいます。画面にアイテムを描画し、このデータを pdf に変換する必要があります。

描画には、html5 キャンバス要素を使用しています。

PDF を作成するために、ライブラリ「jsPdf」を使用しています。

問題は、Android では、メソッド canvas.toDataUrl ('image / jpeg') は常に「image/png」タイプの文字列を返しますが、jsPdf ライブラリは Base64-jpg 形式の画像のみを読み取ることです。

私は2つの解決策を考えました：

1）インターネットで見つけたある種の「javascriptエンコーダー」を使用しますが、アクティブなリンクが見つかりませんでした。キャンバスをBase64-jpg形式の文字列に変換します。

2) base64-png 文字列を base64-jpg 形式に「変換」するプラグインを作成します。

だから....この「翻訳」を行うためのJavaScriptまたはJavaの方法はありますか？または、私が説明したことを実現する別の方法を知っている人はいますか?

4

2 に答える 2

2

これを試してください：

http://web.archive.org/web/20120830003356/http://www.bytestrom.eu/blog/2009/1120a_jpeg_encoder_for_javascript

JPEGEncoder をダウンロードした後、次のコードを挿入します。

 var encoder = new JPEGEncoder();
 var imageData = encoder.encode(canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height), 100);

また

背景色に問題がある場合は、これを試してください:

http://www.mikechambers.com/blog/2011/01/31/setting-the-background-color-when-generating-images-from-canvas-todataurl/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+MikeChambers+ %28マイク+チェンバース%29

function canvasToImage(canvas, backgroundColor)
{
    //cache height and width        
    var w = canvas.width;
    var h = canvas.height;
    var context = canvas.getContext('2d');
    var data;       

    if(backgroundColor)
    {
        //get the current ImageData for the canvas.
        data = context.getImageData(0, 0, w, h);

        //store the current globalCompositeOperation
        var compositeOperation = context.globalCompositeOperation;

        //set to draw behind current content
        context.globalCompositeOperation = "destination-over";

        //set background color
        context.fillStyle = backgroundColor;

        //draw background / rect on entire canvas
        context.fillRect(0,0,w,h);
    }

    //get the image data from the canvas
    var imageData = canvas.toDataURL("image/png");

    if(backgroundColor)
    {
        //clear the canvas
        context.clearRect (0,0,w,h);

        //restore it with original / cached ImageData
        context.putImageData(data, 0,0);        

        //reset the globalCompositeOperation to what it was
        context.globalCompositeOperation = compositeOperation;
    }

    //return the Base64 encoded data url string
    return imageData;
}
  • 背景色パラメータ:'rgba(255,255,255,0.5)'
于 2013-10-10T03:17:04.407 に答える
0

多分これはあなたを助けるでしょう、

HTML5 Canvas からのバイナリ (base64) データの取得 (readAsBinaryString)

その指定された

「別のオリジンからロードされたデータをキャンバスに描画したとブラウザが判断した場合、toDataURL メソッドは失敗するため、このアプローチは、スクリプトが HTML ページと同じサーバーから画像ファイルをロードした場合にのみ機能します。この操作を実行します。」

これも参照

http://www.nihilogic.dk/labs/canvas2image/

于 2013-07-11T10:09:41.130 に答える