Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 合并Raphael svg中的图像_Jquery_Svg_Raphael_Canvg - Fatal编程技术网

Jquery 合并Raphael svg中的图像

Jquery 合并Raphael svg中的图像,jquery,svg,raphael,canvg,Jquery,Svg,Raphael,Canvg,正在尝试创建 第1步-让用户通过Ajax、Raphael和Raphael freetransform上传图像 第2步-单击按钮以显示合并上载图像中的一个图像。(问题): 我发现了类似的关于转换拉斐尔svg的帖子 , 因此,我也在使用Canvg,但得到console.log:资源被解释为图像,但使用MIME类型text/html传输错误:未找到图像 请帮我找到解决办法。或者以其他方式实现相同目标(将几个Raphael svg图像从上载转换为一个png/jpeg)的任何线索 谢谢 第一步 // up

正在尝试创建
第1步-让用户通过Ajax、Raphael和Raphael freetransform上传图像

第2步-单击按钮以显示合并上载图像中的一个图像。(问题): 我发现了类似的关于转换拉斐尔svg的帖子 ,
因此,我也在使用Canvg,但得到console.log:
资源被解释为图像,但使用MIME类型text/html传输
错误:未找到图像

请帮我找到解决办法。或者以其他方式实现相同目标(将几个Raphael svg图像从上载转换为一个png/jpeg)的任何线索

谢谢

第一步

// 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
//合并并显示
$('.merge_btn')。单击(函数(){
var upload_svg=$('.upload_img').html();
canvg(“画布”,上传svg);
log('upload_svg'+upload_svg')//
//并得到错误
});
//这些代码如果切换显示Raphael freetransform svg句柄,则需要将多个svg句柄转换为一个图像。但仍未找到要合并的上载图像

如果我没有弄错的话,
canvg
函数期望第二个参数是包含图像文件路径的
字符串。但是,在步骤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类型text/html传输-
它需要图像,但接收到空白的
html
。代码的其余部分似乎很好。

我不知道Raphael和Raphael freetransform,但在转换之前,错误看起来好像出了问题。它看起来无法找到图像,因此无法进行变换。您确定图像已保存到正确的目录中吗?你能做一个JSFIDLE吗?