Raphael birleştirme resimleri svg

Question

Oluşturulmaya çalışılıyor
Adım 1 - Kullanıcıların Ajax, Raphael ve Raphael freetransform aracılığıyla resim yüklemesine izin verin.

Adım 2 - Bir görüntüyü birleştirme görüntülerinden göstermek için düğmesine tıklayın. (Soru): Resource interpreted as image but transferred with MIME type text/htmlerror: image "" not found: Hakkında çok ben Canvg kullanıyorum çok ama console.log olsun Raphael svg 1 2 3,
dönüştürmek benzer bir yazı bulduk .

Lütfen nasıl çözüleceğimi bulmanıza yardımcı olun. ya da aynı hedefe nasıl ulaşılacağı konusunda herhangi bir ipucu (birkaç Raphael svg görüntüsünü bir png/jpeg'ye dönüştürme) başka şekilde nasıl dönüştürülür?

Teşekkürler!

Adım 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; 
     } 
    }); 
}); 

Adım 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

Ben canvg fonksiyonunu karıştırıyorsun değilsem ikinci parametre resim dosyasının yolunu içeren bir String olmasını bekler. Ancak adımda 2 kodunuzu yapar:

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

ben gibi bir şey tavsiye ederiz: hatayı açıklayacağız

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

- Resource interpreted as image but transferred with MIME type text/html - bu bir görüntü beklediğini ancak boş HTML alır. Kodun geri kalanı iyi görünüyor.