jquery - merge images from Raphael svg -


trying create
step 1 - let users upload images through ajax, raphael , raphael freetransform.

step 2 - click button show 1 image merge upload images. (question): have found similar post convert raphael svg 1 2 3,
i'm using canvg console.log: resource interpreted image transferred mime type text/html error: image "" not found.

please me find how solve it. or clue how reach same goal(convert several raphael svg images upload 1 png/jpeg) in other way?

thanks!

step 1

// upload images , 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 , 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>     // , error });   // these code if toggle show raphael freetransform svg handle, work convert several svg handle 1 image. still not found upload image merge 

if i'm not mistaking canvg function expects second parameter string containing path image file. in step 2 code does:

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

i suggest try like:

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

that explain error - resource interpreted image transferred mime type text/html - expects image receives blank html. rest of code seems fine.


Comments

Popular posts from this blog

Pull out data related to my apps from Android Play Store and iOS App Store -

Change php variable from jquery value using ajax (same page) -

How can I fetch data from a web server in an android application? -