PHP Lang
  1. PHP Lang
  3. html2canvas: удалить пустое место над изображением
Intereting Posts
Curl и PHP – как я могу передать json через curl с помощью PUT, POST, GET Вытяните все изображения из указанного каталога, а затем отобразите их Доступ к стоимости доставки в тележке Magento и / или оформлении заказа Извлечь URL из строки Является ли mysql_insert_id безопасным для использования? Зачем мне нужно «fclose» после записи в файл на PHP? PHP-сессии, не работающие на сервере num_rows () не возвращает правильное число строк, когда результат не пуст Использование переменной в предложении WHERE Регулярное выражение PHP – получить номер из строки Чекирование и ошибка в функции PHP uuid_binary ошибка проверки формы: выбор не существует или не является уникальным Проверка правильности выражения php Laravel 5.1 – Ошибка несоответствия токена с помощью iframe только в браузере Safari MySQL-запрос с использованием функции PHP?

html2canvas: удалить пустое место над изображением

Это делает меня сумасшедшим. Я просто хотел бы html2canvas захватить изображение

У меня есть это: 

<div id="post" class="xx">Déposer</div> <canvas width="500" height="200"></canvas> <script type="text/javascript" src="html2canvas.js"></script> <script type="text/javascript"> var canvas = document.querySelector("canvas"); html2canvas($("#post"), {canvas: canvas}).then(function(canvas) { var img = canvas.toDataURL() window.open(img); }); </script>

Результатом этого изображения является:

ширина и высота, не соответствующие размеру изображения

Кнопка появляется внизу холста, и я хотел бы оставить только кнопку, любую идею о том, как получить только кнопку?

Если я изменил размер холста, результат будет таким:

введите описание изображения здесь

и вот код кнопки: 

 <div id="post"> <div style="float:left;background:url(g.png);width:21px;height:53px;"></div> <div id="c" style="float:left;background:url(c.png) repeat-x;height:53px;font-family:arial;text-shadow: -1px -1px rgba(0, 0, 0, 0.3);padding: 12px 20px;font-size: 20px;line-height: 24px;color: rgb(255, 255, 255);text-align: center;vertical-align: middle;text-decoration: none;">Déposer</div> <div style="float:left;background:url(d.png);width:21px;height:53px;"></div> </div>

и файлы: c.pngd.pngg.png

который делает эту кнопку (без дополнительной css на странице): введите описание изображения здесь

Solutions Collecting From Web of "html2canvas: удалить пустое место над изображением"

Следующий код: 

 <html> <head> <style> canvas { border: solid red 1px; } </style> </head> <div id="post"> <div style="float:left;background:url(g.png);width:21px;height:53px;"></div> <div id="c" style="float:left;background:url(c.png) repeat-x;height:53px;font-family:arial;text-shadow: -1px -1px rgba(0, 0, 0, 0.3);padding: 12px 20px;font-size: 20px;line-height: 24px;color: rgb(255, 255, 255);text-align: center;vertical-align: middle;text-decoration: none;">Déposer</div> <div style="float:left;background:url(d.png);width:21px;height:53px;"></div> </div> <canvas width="500" height="200"></canvas> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="html2canvas.js"></script> <script type="text/javascript"> var canvas = document.querySelector("canvas"); html2canvas($("#post"), {canvas: canvas}); //.then is an invalid function for html2canvas /*.then(function(canvas) { var img = canvas.toDataURL() window.open(img); }); */ </script> </html>

Дает мне следующие результаты:

введите описание изображения здесь

Из этого я бы сделал вывод

  • html2canvas имеет небольшое количество дополнений, где он добавляет изображение в холст
  • У вас может быть css на вашей кнопке, которая может заставлять холст отталкивать ее дальше, чем вы хотели бы