Question

我正在尝试创建一个网站，您可以使用Raphael.js在另一个图像上绘制图像。绘图部件已完成，我可以将这些行导出为png。我将图像插入由函数paper.image()生成的SVG raphael; 不幸的是我的导出功能不包括导入的图像。

这些是我正在使用的脚本，但我认为我并不是全部使用它们。

<script src="../jquery-2.0.1.min.js"></script>
<script src="raphael-min.js"></script>
<script src="rgbcolor.js"></script>
<script src="canvg.js"></script>
<script src="StackBlur.js"></script>
<script src="svg.min.js"></script>

这是导出功能$（'#save'）。onmousedown ...

var canvas = document.getElementById('canvas2');
var svg = document.getElementById('canvas');
svg = svg.innerHTML;
canvg(canvas, svg);
var img_url = canvas.toDataURL('image/png');
$('#converted_image').attr('src', img_url);
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

以下是我通过代表图像$('#img1').onmousedown ...

的按钮导入图像的方法

paper.clear();
var c = paper.image("images/img1.png", 10, 10, 200, 200);

以下是dom-tree中输出的样子，图像和白线为例。

<div id="canvas">
    <svg height="300" version="1.1" width="300" 
         xmlns="http://www.w3.org/2000/svg"
         style="overflow: hidden; position: relative; " id="canvassvg">
        <desc>Created with RaphaÃ«l 2.1.0</desc>
        <defs></defs>
        <image x="10" y="10" width="200" height="200"
               preserveAspectRatio="none" href="images/img1.png">
        </image>
        <path style="stroke-linecap: round; stroke-linejoin: round; "
              fill="none" stroke="#ffffff" 
              d="M383,201L383,201L383,202L383,203"
              stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
        </path>
    </svg>
</div>

非常感谢您的回复，请原谅我的英文。

Answer 1

我使用Batik成功完成了这项工作，你可以在这里下载：http://xmlgraphics.apache.org/batik/tools/rasterizer.html

一旦你拥有SVG，只需将svg保存到文件并将其传递给蜡染，你就完成了！输出一个非常好的PNG（甚至可以在远程包含图像时工作）。

Answer 2

您是否尝试过Canvas drawImage（）方法？

此处示例：https://developer.mozilla.org/samples/canvas-tutorial/3_1_canvas_drawimage.html

Answer 3

建议的答案here对我有用！

在定义Raphael对象后，您应该执行以下操作：

raphaelObj.attr('xmlns:xlink',"http://www.w3.org/1999/xlink");

Answer 4

我认为它应该工作

<div id="forsvgtopng">
           <div id="svgelemntdiv">
               <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
             <rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/>
           </svg>
        </div>
       <div class="canvasdiv">
            <canvas ></canvas>
       </div>
    <div class="pngdiv">
         <img id="svgpng" />
    </div>
</div>

调用javascript函数，如convertedvg（'＃forsvgtopng'）

function convertsvg(selectors) {
      [].forEach.call(document.querySelectorAll(selectors), function (div) {
        try {

            var sourceImage;
            var imgs = document.getElementById('svgpng'),
              svg = div.querySelector('svg'),
              can = div.querySelector('canvas'),
              ctx = can.getContext('2d');
              can.width =500;
              can.height = 550;

             sourceImage = new Image;
            sourceImage.width = can.width;
            sourceImage.height = can.height;
            sourceImage.onload = function () {
                ctx.drawImage(sourceImage,80,90);

                imgs.src = can.toDataURL();
            };

            sourceImage.src = svg ? svgDataURL(svg) :"";
        } catch (e) { console.log(e) }
    });
}}


      function svgDataURL(svg) {

    var svgAsXML = (new XMLSerializer).serializeToString(svg);
    return "data:image/svg+xml," + encodeURIComponent(svgAsXML);
}

使用SVG中的图像将SVG导出到PNG

4 个答案: