1

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

绘制我们使用 html5 画布元素。

要编写 pdf，我们使用库“jsPdf”。

问题是，在 Android 上，canvas.toDataUrl ('image / jpeg') 方法总是返回“image/png”类型的字符串，但 jsPdf 库只读取 Base64-jpg 格式的图像。

我想到了两个解决方案：

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 (readAsBinaryString) 获取二进制 (base64) 数据

它指定

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

也参考这个

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

于 2013-07-11T10:09:41.130 回答