6

Raphael.js を使用して別の画像の上に画像を描画できる Web サイトを作成しようとしています。描画パーツが完成し、線を png としてエクスポートできるようになりました。raphael が関数によって生成した SVG に画像を挿入しますpaper.image()。残念ながら、私のエクスポート機能にはインポートされた画像が含まれていません。

これらは私が使用しているスクリプトですが、すべてを使用しているとは思いません。

<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>

返信ありがとうございます。私の英語を許してください。

4

4 に答える 4

0

ここで提案された答えは私のために働いた!

Raphael オブジェクトを定義したら、次のようにする必要があります。

raphaelObj.attr('xmlns:xlink',"http://www.w3.org/1999/xlink");
于 2014-02-14T21:38:33.917 に答える
0

Canvas drawImage() メソッドを試しましたか?

例: https://developer.mozilla.org/samples/canvas-tutorial/3_1_canvas_drawimage.html

于 2013-08-22T08:40:43.330 に答える
0

私はそれがうまくいくべきだと思います

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

convertvg('#forsvgtopng') のような JavaScript 関数を呼び出します。

于 2017-03-22T09:40:01.987 に答える