hợp nhất hình ảnh từ Raphael svg

Question

Cố gắng tạo
Bước 1 - Cho phép người dùng tải hình ảnh qua Ajax, Raphael và Raphael freetransform.

Bước 2 - Nút nhấp để hiển thị một hình ảnh từ hình ảnh tải lên hợp nhất. (Câu hỏi): Tôi đã tìm thấy bài tương tự về chuyển đổi Raphael svg 1 2 3,
vì vậy tôi đang sử dụng Canvg quá nhưng được console.log: Resource interpreted as image but transferred with MIME type text/htmlerror: image "" not found.

Vui lòng giúp tôi tìm cách giải quyết. hoặc bất kỳ đầu mối làm thế nào để đạt được mục tiêu tương tự (chuyển đổi một số hình ảnh svhael svg từ tải lên một png/jpeg) theo cách khác?

Cảm ơn!

Bước 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; 
     } 
    }); 
}); 

Bước 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

Nếu tôi không nhầm canvg chức năng hy vọng tham số thứ hai là một String chứa đường dẫn đến tập tin hình ảnh của bạn. Tuy nhiên trong bước 2 mã của bạn không:

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

tôi đề nghị bạn thử một cái gì đó như:

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

Điều đó sẽ giải thích các lỗi - Resource interpreted as image but transferred with MIME type text/html - dự kiến ​​một hình ảnh nhưng nhận trống HTML. Phần còn lại của mã có vẻ ổn.