Как преобразовать все мои данные div в изображение и сохранить его в каталог без использования canvas?
Я уже создал свои данные (шаблон, содержащий изображение, текст, метку и т.д.) Внутри div, Теперь я хочу преобразовать их в формат изображения. есть ли какая-либо техника для преобразования определенного содержимого div в изображения без использования canvas. кто-нибудь, пожалуйста, помогите мне! я хочу преобразовать весь контент "mydiv" в изображение и сохранить это изображение в свой каталог изображений, когда я нажму "Сохранить"?
<html>
<header>
</header>
<body>
<label> Template Design</label>
<div id="mydiv">
<label> Good Morning</label>
<img src="mug.png" id="img1" height="100" width="100" />
</div>
<input name="save" type="button" value="SAVE" />
</body>
</html>
2 answers
ОБНОВЛЕНИЕ (март 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() для преобразования холста в изображение и добавления его в документ. Сохранение сгенерированного изображения на сервере - бесконечно более сложная задача, так как для отправки данных изображения в PHP-скрипт, который преобразует сгенерированный URL data: в реальное изображение, а затем сохраняет его в каталог, в который у вас есть разрешение на запись, потребуется вызов AJAX или что-то подобное. Если это то, что вам нужно сделать, вместо того, чтобы вдаваться в это здесь я бы рекомендовал начать с этого вопроса о переполнении стека: Как сохранить холст 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 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>