修复从 svg + html5 Canvas 生成的 base64 png 文件的最大大小答案

【问题标题】：Fix max size to base64 png file generated from svg + html5 Canvas修复从 svg + html5 Canvas 生成的 base64 png 文件的最大大小
【发布时间】：2015-07-05 16:42:26
【问题描述】：

问题来了，

我在一个 svg 编辑器上工作，用户可以在其中处理具有“无限”大小的 svg 文件……但有时，我需要将 svg 文件转换为 png 图像。

问题是，大尺寸的 png 文件变得太大。（>2Mo 已经太大了）

我需要在某个地方为我的 png 文件设置最大大小。此文件仅用于在 a3 页面或 a4 页面上打印图像，因此我并不需要 BIG 分辨率。

这是我实际从 svg 获取 png 文件的方法：

1.构建我的 png 文件的代码：

    /*
    svgContents -> is the whole svg code
    name -> is the name of the output file
    w -> the width i get from the svg container tag
    h -> the height i get from the svg container tag
    callback... (returns my conversion result, the file url)
    */
    function buildPngFile(svgContents,name,w,h,callback){

        var contents = svgContents;
        var fname = name;
        var myCanvas = document.getElementById("canvas");
        myCanvas.setAttribute("width",w);
        myCanvas.setAttribute("height",h);
        var myCtxt = myCanvas.getContext("2d");
        myCtxt.fillStyle="#FFFFFF";
        myCtxt.fillRect(0,0,w,h);
        drawInlineSVG(myCtxt,contents,function(){
            $.ajax({ 
                type : 'POST',
                cache : false,
                url : './createPngFile.php',
                data : {'dataPng':myCanvas.toDataURL(),'map':map},
                dataType : 'json',
                error : function(response){
                    console.log("ERROR : "+response+"responsetext : "+response.responseText+"json : "+JSON.stringify(response));
                },
                success : function(response){
                    callback(response);
                }
            });
        });
    }

我认为在上面的代码中手动设置 Canvas 的宽度和高度可以解决问题，但根本不行。如果我修复它（例如 1280/720），它只显示与这些值对应的 svg 图像部分。所以我只在 png 文件上获得了我的 svg 的一部分。这不起作用。

2。 drawInlineSvg 函数

function drawInlineSVG(ctx, rawSVG, callback) {
    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
        domURL = self.URL || self.webkitURL || self,
        url = domURL.createObjectURL(svg),
        img = new Image();
    img.onload = function () {
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    }
    img.src = url;
}

这只是将 svg 绘制到画布中...

3. createPngFile.php

    $name = $_POST['map'];
    $data = $_POST['dataPng'];
    $data = str_replace('data:image/png;base64,', '', $data);
    $data = str_replace(' ', '+', $data);
    $file = fopen($_SERVER['DOCUMENT_ROOT'].'/png/'.$name.'.png','w');
    fwrite($file,base64_decode($data));
    fclose($file);
    echo json_encode($_SERVER['DOCUMENT_ROOT'].'/png/'.$name.".png");

这会将 url 返回到 png 文件。所有这些代码都运行良好，我需要将我的 png 图片大小限制为定义的最大宽度或最大高度，以避免使巨大的 .png 文件达到超过 2Mo（例如）

感谢阅读/帮助:)

【问题讨论】：

drawInlineSVG 是做什么的？
哎呀：P让我编辑我的帖子
@PavelGatnar 更新:)

标签： javascript php html svg png

【解决方案1】：

你需要在调用ctx.drawImage(this, 0, 0);中提供额外的参数

重用Scale an image added to canvas中drawImageScaled函数中的逻辑来缩放图像

【讨论】：