Merge Bilder von Raphael Svg

Question

Versuchen zu erstellen
Schritt 1 - Lassen Sie Benutzer Bilder hochladen durch Ajax, Raphael und Raphael freetransform.

Schritt 2 - Klicken Sie auf die Schaltfläche, um ein Bild aus den hochgeladenen Bildern anzuzeigen. (Frage): ich ähnliche Position gefunden haben, über Raphael svg 1 2 3,
so konvertieren Ich verwende Canvg auch, aber console.log erhalten: Resource interpreted as image but transferred with MIME type text/htmlerror: image "" not found.

Bitte helfen Sie mir zu finden, wie man es löst. oder irgendein Hinweis, wie man dasselbe Ziel erreicht (andere Raphael svg Bilder vom Hochladen zu einem png/jpeg umwandeln) in anderer Weise?

Danke!

Schritt 1

// upload images and ajax show in page 
var paper = Raphael($('.upload_img')[0], 400, 200); 
$('.upload_btn').click(function(){ 
    ... 
    $.ajax({ 
     type: "POST", 
     url: "index.php", 
     data: fd, 
     processData: false, 
     contentType: false, 
     success: function(html){ 
      var session = ..., file = ... type = ...; 
      function register(el) { 
       // toggle handle 
      }; 
      var img = new Image(); 
      img.onload = function(){ 
       var r_img = paper.image('img/product/tmp/'+session+'/'+file+type, 0, 0, 200, 200); 
       register(r_img); 
      }; 
      img.src = 'img/product/tmp/'+session+'/'+file+type; 
     } 
    }); 
}); 

Schritt 2

// merge and show 
$('.merge_btn').click(function(){ 
    var upload_svg = $('.upload_img').html(); 
    canvg('canvas', upload_svg); 
    console.log('upload_svg'+upload_svg); //<svg height="200" version="1.1" width="400" xmlns="http://www.w3.org/2000/svg" style="overflow-x: hidden; overflow-y: hidden; position: relative; "><desc></desc><defs></defs><image x="0" y="0" width="200" height="216.91973969631235" preserveAspectRatio="none" href="img/product/tmp/bc4d26ceb620852db36074d351883539/6.jpeg"></image></svg> 
    // and get error 
}); 


// These code If toggle show Raphael freetransform svg handle, it is work convert several svg handle to one image. but still not found upload image to merge 

Answer 1

Wenn ich canvg Funktion bin nicht zu verkennen erwartet, dass der zweite Parameter ein String enthält den Pfad zur Bilddatei sein. Jedoch in Schritt 2 Ihr Code tut:

var upload_svg = $('.upload_img').html(); // **** this does not return the image path 
    canvg('canvas', upload_svg); 

Ich schlage vor, versuchen Sie so etwas wie:

var upload_svg = $('.upload_img').attr('src'); 
    canvg('canvas', upload_svg); 

, die den Fehler erklären - Resource interpreted as image but transferred with MIME type text/html - es ein Bild erwartet, sondern erhält leere HTML. Der Rest des Codes scheint in Ordnung zu sein.