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

Ответ 1

ОБНОВЛЕНИЕ (март 2018 года): Привет, люди будущего! Этот ответ по-прежнему получает большой трафик, и я заметил, что старый JSFiddle, который я собрал, был сломан, поэтому он был обновлен. Новый JSFiddle, показывающий эту технику, находится здесь: https://jsfiddle.net/Sq7hg/1913.

-

Возможно, вам стоит взглянуть на решение на основе 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
    }
});

Я тут же применил быстрый ответ: https://jsfiddle.net/Sq7hg/1913/ (примечание: обновленная ссылка в соответствии с выше)

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

Ответ 2

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

//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>

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