Как преобразовать все данные div в изображение и сохранить его в каталог без использования холста?

Возможно, вам стоит взглянуть на решение на основе Flash, если вы не можете использовать <canvas> (хотя, если это специально не нужно работать в старых версиях IE, я не уверен, почему вы не можете).

http://flashcanvas.net/ – это эмуляция <canvas> с использованием Flash, которая может помочь вам в том, куда вам нужно идти. В документации говорится, что он поддерживает toDataURL() чтобы он мог работать для вас.

Можете ли вы более подробно рассказать о своих ограничениях в отношении <canvas> и о том, что вы уже пытались попробовать?

//РЕДАКТИРОВАТЬ

В соответствии с вашим комментарием ниже вы можете использовать <canvas> , и в этом случае вы можете попробовать использовать http://html2canvas.hertzen.com – это решение JavaScript, которое в основном переписывает DOM указанной части вашего кода на <canvas> а затем позволяет вам взаимодействовать с ним, как вы хотите, включая включение его в данные изображения через toDataURL() .

Я не использовал его раньше, но ваш код JavaScript будет выглядеть примерно так:

 html2canvas([document.getElementById('mydiv')], { onrendered: function(canvas) { var data = canvas.toDataURL('image/png'); // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server } }); 

Я тут же применил это в действии: http://jsfiddle.net/Sq7hg/1/

EDIT еще раз:

http://jsfiddle.net/Sq7hg/2/

В этом jsfiddle показано, как использовать метод toDataURL() для преобразования холста в изображение и добавления его в документ. Сохранение сгенерированного изображения на сервере представляет собой бесконечно более сложную задачу, поскольку для этого потребуется вызов AJAX или что-то подобное, чтобы отправить данные изображения в скрипт PHP, который преобразует сгенерированные data: URL-адрес фактического изображения и затем сохраняет его в каталог, который у вас есть разрешение на запись. Если это то, что вам нужно сделать, а не в этом, я бы рекомендовал начать с этого вопроса о переполнении стека: как сохранить холст HTML5 как изображение на сервере

Это прекрасно работает … должно быть самым простым решением.

// HTML

 <div id="mydiv" style="background-image:url(Koala.jpg) ;background-size: 100%; background-size :200px 200px; background-repeat: no-repeat;"> <p>text!</p> <img src="mug.png" height="100" width="100"/></div> <div id="canvas"> <p>Canvas:</p> </div> <div style="width:200px; float:left" id="image"> <p style="float:left">Image: </p> </div> <div style="float:left;margin-top: 120px;" class="return-data"> </div> <script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

//Стиль

 #mydiv { background-color: lightblue; width: 200px; height: 200px } 

// Script

  <script language="javascript"> html2canvas([document.getElementById('mydiv')], { onrendered: function (canvas) { document.getElementById('canvas').appendChild(canvas); var data = canvas.toDataURL('image/png'); //display 64bit imag var image = new Image(); image.src = data; document.getElementById('image').appendChild(image); // AJAX call to send `data` to a PHP file that creates an PNG image from the dataURI string and saves it to a directory on the server var file= dataURLtoBlob(data); // Create new form data var fd = new FormData(); fd.append("imageNameHere", file); $.ajax({ url: "uploadFile.php", type: "POST", data: fd, processData: false, contentType: false, }).done(function(respond){ $(".return-data").html("Uploaded Canvas image link: <a href="+respond+">"+respond+"</a>").hide().fadeIn("fast"); }); } }); function dataURLtoBlob(dataURL) { // Decode the dataURL var binary = atob(dataURL.split(',')[1]); // Create 8-bit unsigned array var array = []; for(var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } // Return our Blob object return new Blob([new Uint8Array(array)], {type: 'image/png'}); } </script> 

вот пример демонстрации