html2canvas输出选择div PHP

这段代码几乎可行
这会将整个页面输出为jpg
问题 ：我如何只抓取'#myDiv'的内容并将其输出为jpg文件？

JS：

 $('.myButton').click(function(){ $('#myDiv').html2canvas();//<< has no effect var queue = html2canvas.Parse(); var canvas = html2canvas.Renderer(queue,{elements:{length:0}}); var img = canvas.toDataURL(); img.replace(/^data:image\/(png|jpg);base64,/, ""); $.post( "postIO.php", {img:img}, function(data) { //$('#recieve').append(data); }); return false; }); 

postIO.php：

 $canvasImg = $_POST['img']; //$canvasImg = str_replace('data:image/png;base64,', '', $canvasImg); $data = base64_decode($canvasImg); $File = "z.jpg"; $Handle = fopen($File, 'w'); fwrite($Handle, $data); fclose($Handle); 

从这里引用

Answer 1

我已经下载并尝试html2canvas，然后我发现jquery插件没有完成（它没有什么比捕获图像和创建canvas，没有用）所以我自己编写捕获代码。

 var el = $('div').get(0); function saveData(dturl){ //Upload here console.debug(dturl); } html2canvas.Preload(el, { complete: function(image){ var queue = html2canvas.Parse(el, image, {elements: el}), $canvas = $(html2canvas.Renderer(queue, {elements: el})); saveData($canvas[0].toDataURL()); } }); 

希望它对你有所帮助

所以要与你的程序一起使用，你必须写

 function saveData(dturl){ dturl.replace(/^data:image\/(png|jpg);base64,/, ""); $.post( "postIO.php", {img:dturl}, function(data) { //$('#recieve').append(data); }); } $('.myButton').click(function(){ var el = $('#myDiv').get(0); html2canvas.Preload(el, { complete: function(image){ var queue = html2canvas.Parse(el, image, {elements: el}), $canvas = $(html2canvas.Renderer(queue, {elements: el})); saveData($canvas[0].toDataURL()); } }); }); 

Answer 2

var canvasImg = canvasRecord.toDataURL("image/jpg"); ，您可能需要使用var data = canvasImg.replace(/^data:image\/(png|jpg);base64,/, "");替换它var data = canvasImg.replace(/^data:image\/(png|jpg);base64,/, "");

是$canvasImg = $_POST['canvasImg']; 而不是$ _POST [‘img’]？