jquery – 合并Raphael svg的图片

试图创造
第1步 – 让用户通过Ajax,Raphael和Raphael freetransform上传图像.

步骤2 – 点击按钮从合并上传图像显示一个图像. (题)：
我已经找到类似的帖子关于转换Raphael svg
1
2
3,
所以我也使用Canvg,但是得到console.log：资源被解释为图像,但是传送与MIME类型的文本/ html错误：图像“”未找到.

请帮我找到如何解决.或任何线索如何达到相同的目标(将几个Raphael svg图像从上传转换为一个png / jpeg)以其他方式？

谢谢！

步骤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,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

解决方法

如果我没有错误,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);

这将解释错误 – 资源解释为图像,但使用MIME类型的文本/ html传输 – 它期望一个图像,但接收空白的HTML.其余的代码似乎很好.

原文地址：https://www.jb51.cc/jquery/179509.html