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
Post a Comment