Я создаю веб-приложение типа редактора изображений. У меня есть главный div который будет содержать много div внутри него.
Когда пользователь нажимает кнопку сохранения, я хочу сохранить главный div как изображение в папке. Я попытался сделать это с помощью Canvas.toDataURL() но потом обнаружил, что я не могу разместить div (основной div) внутри тегов canvas. Я также попробовал imagegrabscreen() php, но он захватил экран перед загрузкой всей страницы, поэтому это было бесполезно.
Может ли кто-нибудь помочь мне и предложить способ реализовать это с помощью php или javascript?
Почему вы используете кучу div s, когда вы можете просто использовать один canvas и нарисовать его с помощью правильных функций холста?
Есть много примеров того, что вы пытаетесь сделать, например, этого .
use this code to save image from canvas function save_canvas_img() { var canvas = document.getElementById("your id"); var canvasData = canvas.toDataURL("image/png"); var ajax = new XMLHttpRequest(); ajax.open("POST",'save.php',false); ajax.setRequestHeader('Content-Type', 'application/your page name'); ajax.send(canvasData ); alert('You have successfully saved this image'); }`enter code here` here save.php if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) { $imageData=$GLOBALS['HTTP_RAW_POST_DATA']; $filteredData=substr($imageData, strpos($imageData, ",")+1); $unencodedData=base64_decode($filteredData); // Need to decode before saving since the data we received is already base64 encoded //echo "unencodedData".$unencodedData; $randomName = mktime(). rand(99999,9999999). '.png'; $fp = fopen( 'foldername/'.$randomName, 'wb' ); fwrite( $fp, $unencodedData); fclose( $fp );}`enter code here`
Если вы хотите снять «скриншот» своего основного div, проверьте ссылки ниже
Использование HTML5 / Canvas / JavaScript для создания скриншотов