Question

我正在研究Android中使用PhoneGap开发的项目，我们需要在屏幕上绘制项目并将这些数据转换为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中进行这种“翻译”？或者有人知道另一种方式来实现我所解释的内容吗？

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

backgroundcolor参数：'rgba(255,255,255,0.5)'

Answer 2

也许这会对你有帮助，

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

指定

“如果浏览器认为你已经从画布中抽取了从不同来源加载的任何数据，那么toDataURL方法将失败，因此这种方法只有在你的图像文件从与HTML页面相同的服务器加载时才有效其脚本正在执行此操作。“

也请参考

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

使用java或javascript将64 png字符串基于64 jpg

2 个答案: