jquery - convert - fusionar imágenes de Raphael svg

svg to png javascript

Question

Intentando crear
Paso 1: permite a los usuarios subir imágenes a través de Ajax, Raphael y Raphael freetransform.

Paso 2: haz clic en el botón para mostrar una imagen de la fusión de subir imágenes. (Pregunta): He encontrado una publicación similar sobre convertir Raphael svg 1 2 3 ,
así que también estoy usando Canvg pero obtengo console.log: Resource interpreted as image but transferred with MIME type text/html error: image "" not found .

Por favor, ayúdame a encontrar cómo resolverlo. o alguna pista de cómo alcanzar el mismo objetivo (convertir varias imágenes de Raphael svg de la carga a una png / jpeg) de otra manera?

¡Gracias!

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

Paso 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

Si no me estoy equivocando, la función canvg espera que el segundo parámetro sea una String contenga la ruta a su archivo de imagen. Sin embargo, en el paso 2 su código hace:

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

Te sugiero que intentes algo como:

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

Eso explicará el error - Resource interpreted as image but transferred with MIME type text/html - espera una imagen pero recibe HTML blanco. El resto del código parece estar bien.