使用java或javascript将base 64 png字符串转换为base 64 jpg答案

【问题标题】：base 64 png string to base 64 jpg using java or javascript使用java或javascript将base 64 png字符串转换为base 64 jpg
【发布时间】：2013-07-09 12:48:21
【问题描述】：

我正在使用 PhoneGap 在 Android 中开发一个项目，我们需要在屏幕上绘制项目并将这些数据转换为 pdf。

我们使用 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 中有没有办法进行这种“翻译”？或者有人知道另一种方式来实现我所解释的内容吗？

【问题讨论】：

你有没有尝试过？
@Chintan Rathod 我目前正在尝试创建一个以这种方式工作的插件：获取 Base64PngString -> 创建 pngimage -> 在 jpeg 中转换 pngimage -> 在 base64 中转换 jpeg 文件 -> 返回 base64 字符串。但我正在寻找更智能的解决方案，我不喜欢这样。

标签： javascript android html canvas cordova

【解决方案1】：

试试这个：

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;
}

背景色参数：'rgba(255,255,255,0.5)'

【讨论】：

【解决方案2】：

也许这会对你有所帮助，

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

它指定了

“如果浏览器认为您已将任何从不同来源加载的数据绘制到画布上，则 toDataURL 方法将失败，因此此方法仅在您的图像文件与 HTML 页面从同一服务器加载时才有效谁的脚本正在执行此操作。”

也参考这个

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

【讨论】：

我已经在使用 "canvas.toDataURL("image/jpeg");"方法，但不幸的是在 Android 上无法正常工作...
您链接的库也使用了在 android 中无法正常工作的功能：实际上转换 jpg 库使用此代码：strMime var = "image / jpeg"; var strData = oScaledCanvas.toDataURL (strMime);
刚刚看到 toDataURL 在 android 中是错误的并且在蜂窝中运行良好，阅读 this 并且有一个库 here 告诉我它是否适合你