合并来自 Raphael svg 的图像

尝试创造
步骤 1 - 让用户通过 Ajax、Raphael 和 Raphael freetransform 上传图像。

步骤 2 - 单击 按钮显示合并上传图像中的一张图像。 （问题）：我发现了关于转换 Raphael svg 的类似帖子1 https://stackoverflow.com/questions/9928482/merge-svg-and-jpg-into-one-image 2 https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser 3 https://stackoverflow.com/questions/4086703/convert-raphael-svg-to-image-png-etc-client-side?lq=1,
所以我也使用 Canvg 但获取 console.log：Resource interpreted as image but transferred with MIME type text/html error: image "" not found.

请帮我找到如何解决它。或者有任何线索如何以其他方式达到相同的目标（将上传的多个 Raphael svg 图像转换为一个 png/jpeg）？

谢谢！

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

Step 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

如果我没记错的话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。代码的其余部分看起来不错。