svg到png的转换与svg不相似

Question

I am creating an SVG image, and then converting it to PNG. This is not working, however - the PNG is either not created or created incorrectly.

Sample SVG: http://placementearth.com/977013694537154275/svg52136945630084.svg

Sample PNG: http://placementearth.com/977013694537154275/svg52136945630084.png

$im = new Imagick(); 
$im->setBackgroundColor(new ImagickPixel('transparent')); 
$svg = file_get_contents($svgImage); 
$im->readImageBlob($svg); 
$im->setImageFormat("png32"); 
$dpngImage= $imgname.'.png'; 
file_put_contents($dpngImage,$im); 

AND

shell_exec('convert ex.svg ex.png;);

Any other way to do this. please tell me.

Answer 1

You dont have to use imagemagick for this..

Try this..

In svg-editor.js

var exportHandler = function(window, data) {
            var issues = data.issues;

            if(!$('#export_canvas').length) {
                $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
            }
            var c = $('#export_canvas')[0];

            c.width = svgCanvas.contentW;
            c.height = svgCanvas.contentH;

            var mime = 'image/png';
            var type = 'PNG';
            var datauri = "";
            if(typeof svgCanvas.export_as != 'undefined' && svgCanvas.export_as != null && typeof svgCanvas.export_as.length != 'undefined' && svgCanvas.export_as.length != null && svgCanvas.export_as.length > 0) {
                if(svgCanvas.export_as != 'image/png') {
                    mime = svgCanvas.export_as;
                    /* to make white backgrounf for jpeg images */
                    if(mime == 'image/jpeg') {
                        type = 'JPG';
                        data.svg = data.svg.replace('<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">', '<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect width="100%" height="100%" fill="white" />');   // baseProfile="tiny"
                        data.svg = data.svg.replace('<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">', '<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect width="100%" height="100%" fill="white" />');    // baseProfile="tiny"
                    }
                }
            }
                            svgCanvas.export_as = '';
            canvg(c, data.svg, {renderCallback: function() {
                // var datauri = c.toDataURL('image/png');
                var datauri = c.toDataURL(mime);
                                    $.ajax({
                                        type:"post",
                                        url: 'create.php',
                                        data:{
                                            'datauri' : datauri,
                                            'type' : type
                                        },
                                        success: function(data) {
                                            console.log(window.location.toString().replace('svg-editor.html',data));
                                            exportWindow.location.href = window.location.toString().replace('svg-editor.html',data);
                                        }
                                    });
                // exportWindow.location.href = datauri;
                var done = $.pref('export_notice_done');
                if(done !== "all") {
                    //var note = uiStrings.notification.saveFromBrowser.replace('%s', 'PNG');
                    var note = uiStrings.notification.saveFromBrowser.replace('%s', type);

                    // Check if there's issues
                    if(issues.length) {
                        var pre = "
 \u2022 ";
                        note += ("

" + uiStrings.notification.noteTheseIssues + pre + issues.join(pre));
                    }

                    // Note that this will also prevent the notice even though new issues may appear later.
                    // May want to find a way to deal with that without annoying the user
                    $.pref('export_notice_done', 'all');
                    exportWindow.alert(note);
                }
            }});
        };

create.php

<?php
$imgFile = "generated/test-".time().".".strtolower($_POST['type']);
$fh = fopen($imgFile, 'w');
// ='data:image/png;base64,data:image/png;base64
$image_content = $_POST['datauri'];
$image_content = substr($image_content, strpos($image_content,'base64,')+7);
fwrite($fh, base64_decode($image_content));
fclose($fh);
echo $imgFile;
exit;
?>

Use the image content from URI and write that into a file