राफेल svg

Question

से छवियों को मर्ज करें
चरण 1 - उपयोगकर्ताओं को अजाक्स, राफेल और राफेल फ़्रीट्रांसफॉर्म के माध्यम से छवियां अपलोड करने दें।

चरण 2 - अपलोड छवियों को मर्ज करने से एक छवि दिखाने के लिए बटन क्लिक करें। (प्रश्न): मैं समान पद पाया है के बारे में राफेल svg 1 2 3,
परिवर्तित तो मैं Canvg उपयोग कर रहा हूँ भी लेकिन console.log मिलती है: Resource interpreted as image but transferred with MIME type text/htmlerror: image "" not found।

कृपया इसे हल करने में मेरी सहायता करें। या कोई भी संकेत कैसे एक ही लक्ष्य तक पहुंचने के लिए (कई राफेल svg छवियों को अपलोड से एक पीएनजी/जेपीईजी में परिवर्तित करें) अन्य तरीकों से?

धन्यवाद!

चरण 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; 
     } 
    }); 
}); 

चरण 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

मैं canvg समारोह भूल नहीं कर रहा हूँ, तो उम्मीद है दूसरा पैरामीटर एक String अपनी छवि फ़ाइल के लिए पथ युक्त किया जाना है। हालांकि चरण में 2 अपने कोड है:

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

मैं सुझाव है कि आप की तरह कुछ प्रयास करें:

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

कि त्रुटि की व्याख्या करेगा - Resource interpreted as image but transferred with MIME type text/html - यह एक छवि को उम्मीद है लेकिन प्राप्त करता खाली HTML। बाकी कोड ठीक लगता है।