Решение использования html2canvas для обработки элементов DOM с картой Baidu в изображения

Вопрос 1: Baidu Maps использует изображения в стиле плитки (карта составлена ​​один за другим). Когда html2canvas обрабатывается, когда встречается с изображениями, отличными от одного и того же доменного имени, браузер будет отображать ошибки поперечного домена, и его нельзя решить с помощью обратного прокси, потому что доменное имя изображения плитки является неопределенным, а Proxy_pass не может быть указано

Решение: Используйте статическую обработку карты Baidu Map (http://lbsyun.baidu.com/index.php?title=static), и имя домена определяется (http://api.map.baidu.com), и обратный прокси может быть использован для решения кросс-домена.

 <!-html-> <el-image: src = `/baidu-static/staticimage/v2? ak = yourak & width = 1024 & height = 400 ro = $ {center.lng}, $ {center.lat} & Zoom = 16`> <div slot = класс заполнителя = Image-slot> class = dot> ... </span> </div> </el-image> <!-nginx-> location ^~/baidu-static/{add_header 'Access-Control-Allow-Origin' $ http_origin всегда; Add_Header 'Access-Control-Allowentials всегда add_Header' add_Header 'AddceDer-AddeMeder' add_Header 'add_Header' add_Header 'add_Header' add_Header '; 'Access-Control-Allow-Headers' 'Accept, Authorization, Cache-Control, Content-Type, DNT, IF-модифицированный-счетный, Keep-Alive, Origin, пользователь-агент, x-requested-with' Always; Proxy_Pass http://api.map.baidu.com/;}

Вопрос 2: Как отобразить наложение на карте

Решение: после просмотра API статической карты API карты Baidu, оно не может хорошо поддерживать индивидуальные стили. В лучшем случае вы можете указать пользовательскую картинку (не локальное изображение). Я попробовал много методов в середине, и я подумал, что было бы целесообразно использовать OpenLayers.map, но рабочая нагрузка изменений кода была слишком велика, поэтому я решительно сдался. Позже я подумал об использовании Div для непосредственного моделирования покрытия, и установление его немного выше, чем уровень статического изображения может его решить.

Вопрос 3: Я нарисовал пунктированный круг в стиле CSS. Сгенерированная фигура после обработки HTML2Canvas и обнаружила, что пунктирная линия стала сплошной линией

Решение: используйте холст, чтобы нарисовать круги

Вопрос 4: Значок использует абсолютное позиционирование и сгенерированные графики после обработки html2canvas, и обнаружено, что значок не отображается.

Решение: установите Z-индекс для значка, чтобы быть больше уровня статического графика Baidu (PS: когда стиль статического графа также используется для абсолютного позиционирования)

Вопрос 5: изображение, сгенерированное после HTML2Canvas, обрабатывается с черным цветом фона

Решение: изменить изображение/png на изображение/jpg

 try {html2canvas (sharepage, {usecors: true}). then (((canvas) => {const imgbase64 = canvas.todataurl ('image/jpg') this.data64 = imgbase64})} catch (er) {}

Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.