base 64 png字符串使用java或javascript基礎64 jpg

我正在使用PhoneGap開發Android項目，我們需要在屏幕上繪製項目並將此數據轉換爲pdf。base 64 png字符串使用java或javascript基礎64 jpg

爲了繪製我們使用的html5 canvas元素。

要編寫pdf，我們使用庫「jsPdf」。

問題是，在Android上，canvas.toDataUrl（'image/jpeg'）方法總是返回一個「image/png」類型的字符串，但jsPdf庫僅以Base64-jpg格式讀取圖像。

我想兩種解決方案：

1）使用某種「的JavaScript編碼器」，這是我在互聯網上找到，但我無法找到一個活動鏈接，改造畫布中的Base64 JPG格式字符串。

2）創建一個插件，將base64-png字符串「翻譯」爲base64-jpg格式。

所以....有沒有在JavaScript或Java的方式來做這個「翻譯」？或者任何人知道另一種方式來實現我所解釋的？

來源

2013-07-11 benVG

你嘗試了一些東西？ –

@Chintan Rathod我目前正在嘗試創建一個以這種方式工作的插件：獲取Base64PngString - >創建pngimage - >在jpeg中轉換pngimage - >在base64中轉換jpeg文件 - >返回base64字符串。但我正在尋找更智能的解決方案，我不喜歡這個。 – benVG

也許這會幫助你，

Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

其指定

「如果瀏覽器認爲你已經吸引到畫布是從加載的任何數據toDataURL方法將失敗不同的來源，所以這種方法僅適用於如果您的圖像文件是從其腳本正在執行此操作的HTML頁面從相同服務器加載的話。「

也提到這個

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

來源

2013-07-11 10:09:41 ankyskywalker

我已經在使用「canvas.toDataURL（」image/jpeg「）;」方法，但不幸的是不能在Android上正常工作... – benVG

，你也與庫使用該功能，並非Android的正常工作：其實轉換JPG庫使用此代碼： 'strMime VAR =「圖像/ JPEG」; VAR strData是= oScaledCanvas.toDataURL（strMime）;' – benVG

剛纔看到的toDataURL採用的是Android馬車和在蜂巢效果很好，讀[這]（http://code.google.com/p/android/issues/detail ？ID = 7901），有一個庫[這裏]（http://code.google.com/p/todataurl-png-js/）告訴我，如果你的作品 – ankyskywalker

試試這個：

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+%28Mike+Chambers%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; 
}

的backgroundColor參數：'rgba(255,255,255,0.5)'

來源

2013-10-10 03:17:04 syarif

base 64 png字符串使用java或javascript基礎64 jpg

回答

相關問題