试图创造
第1步 – 让用户通过Ajax,Raphael和Raphael freetransform上传图像.
第1步 – 让用户通过Ajax,Raphael和Raphael freetransform上传图像.
步骤2 – 点击按钮从合并上传图像显示一个图像. (题)：
我已经找到类似的帖子关于转换Raphael svg
1
2
3,
所以我也使用Canvg,但是得到console.log：资源被解释为图像,但是传送与MIME类型的文本/ html错误：图像“”未找到.
请帮我找到如何解决.或任何线索如何达到相同的目标(将几个Raphael svg图像从上传转换为一个png / jpeg)以其他方式？
谢谢！
步骤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,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
解决方法
如果我没有错误,canvg函数希望第二个参数是一个包含图像文件路径的String.但是在第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类型的文本/ html传输 – 它期望一个图像,但接收空白的HTML.其余的代码似乎很好.
