合并来自Raphael svg的图片 [英] merge images from Raphael svg

问题描述

尝试创建

第1步 - 让用户通过Ajax，Raphael和Raphael freetransform上传图片。

Trying to create
Step 1 - Let users upload images through Ajax, Raphael and Raphael freetransform.

第2步 - 点击按钮显示合并上传图片中的一张图片。 （问题）：
我发现类似的帖子关于转换Raphael svg
1
2
3 ，

所以我也使用Canvg但得到console.log：资源被解释为图像但是用MIME类型文本传输/ html 错误：图片找不到。

请帮我找到解决方法。或任何线索如何达到相同的目标（将上传的几个Raphael svg图像转换为一个png / jpeg）？

Please help me find how to solve it. or any clue how to reach same goal(convert several Raphael svg images from upload to one png/jpeg) in other way?

谢谢！

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

第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

推荐答案

如果我' m不要误认为 canvg function期望第二个参数为 String ，其中包含图像文件的路径。但是在第2步中你的代码会：

If I'm not mistaking canvg function expects the second parameter to be a String containing the path to your image file. However in step 2 your code does:

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

我建议您尝试以下方式：

I suggest you try something like:

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

这将解释错误 - 资源被解释为图像但是使用MIME类型传输text / html - 它需要一张图片，但收到空白 HTML 。其余的代码似乎很好。

That will explain the error - Resource interpreted as image but transferred with MIME type text/html - it expects an image but receives blank HTML. The rest of the code seems fine.

这篇关于合并来自Raphael svg的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！