javascript — document.getElementByID.InnerHTML, внедряющий недопустимые символы

Question

javascript — document.getElementByID.InnerHTML, внедряющий недопустимые символы

Я искал эту проблему в течение 3 дней — и пробовал что-нибудь близкое или связанное, чтобы посмотреть, смогу ли я заставить его работать ….

Я вытягиваю EXIF-теги из JPG-файлов с помощью PHP

и используя его в простом скрипте при наведении курсора, но это то, где он ломается:

Получение данных EXIF

foreach($images as $img){

$exif = exif_read_data($img, 0, true);

И во время моего тестирования я упростил имена переменных — я не думаю, что это необходимо, но сейчас я здесь

$Ititle =  $exif['IFD0']['Title'];
$Isubject = $exif['IFD0']['Subject'];
$Icomment = $exif['IFD0']['Comments'];
$m = "<p>Title: ".$Ititle."<BR>Subject: ".$Isubject."<BR>Comments: ".$Icomment."</p>";
echo $m;

Это Echo $ m работает так, чтобы заголовок / тема / комментарии с изображения Jpg выглядели как положено.

Таким образом, у меня есть уменьшенное изображение с помощью наведения мыши, чтобы изменить большое изображение «preview1.2.3.4 …» на img you mouseover …. и изменить <p> на правильное название / тему / комментарии ..

<img onmouseover="document.getElementById('exifdata<?echo $b;?>').innerHTML = '<?echo $m;?>'; preview<?echo $b;?>.src=img<?echo $p;?>.src" name="img<?echo $p;?>" src="<?echo $img;?>" style="float:left; margin-right:10px; Max-width: 100px; Max-height:100px; width:auto; height:auto;">

Изменение IMG и текста работает на ролловер, но
в <p> это проявляется вот так
Название: H a p p y C o u p l e
Тема: E n j o y i n g I N S u m m e r s
Комментарии:

Вот DIV, где текст меняется

<div style="width:680px; height:auto; overflow:hidden; background: rgba(66, 95, 149, 1);">
<p id='exifdata<?echo $b;?>'>testing
</p>
</div>

Что добавляет эти вопросительные знаки после того, как они пройдут через этот innerHTML?

И вся страница php: * извините, если это грязно — я пробовал много вещей

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<?php
header('Content-Type:text/html; charset=UTF-8');
$b = 1;

$blogs = array_filter(glob('./Content/*'), 'is_dir');
foreach($blogs as $entries){
/*
print "<br>";
print $entries;
print "<br>";
print "<p>Images</p>";
*/
#get all the JPG s in the blog folder
$images = array_filter(glob("$entries/*.JPG"));

#get Textblock and title txt files for verbage....
$textblock = file_get_contents("$entries/Textblock.txt");
$title = file_get_contents("$entries/Title.txt");

#get date for post
$PostDatestr = substr($entries,-8);
$PostDate = date("d M Y", strtotime($PostDatestr));

#Create Entry regardless of type:
?>
<div id="Notice">
<div id="Title"><h2><?echo $title;?></h2></div>
<section class="Wrapper">
<header class="Wrapper"><h1><?echo $PostDate;?></h1></header>
<article>
<?


#print the Blog post....  if one or less photos in DIR
if (count($images) <= 1){
#Don't use img tag if there are 0 images.
if (count($images) === 1){
?><img src="<?echo $images[0];?>" style="float:left; margin-right:10px; Max-width: 680px; Max-height:680px; width:auto; height:auto;">
<?
}
echo $textblock;

}
#print the Blog post.... if there is more than 1 photo in DIR
if (count($images) > 1){
#get info for each photo

?>
<div class="thumbnails" style="width;100%; height:auto; display:block; overflow:hidden;">
<?
foreach($images as $img){

$exif = exif_read_data($img, 0, true);
$Ititle =  $exif['IFD0']['Title'];
$Isubject = $exif['IFD0']['Subject'];
$Icomment = $exif['IFD0']['Comments'];
$m = "<p>Title: ".$Ititle."<BR>Subject: ".$Isubject."<BR>Comments: ".$Icomment."</p>";
echo $m;
#echo $exif===false ? "No header data found.<br />\n" : "Image contains headers<br />\n";
?>

<img onmouseover="document.getElementById('exifdata<?echo $b;?>').innerHTML = '<?echo $m;?>'; preview<?echo $b;?>.src=img<?echo $p;?>.src" name="img<?echo $p;?>" src="<?echo $img;?>" style="float:left; margin-right:10px; Max-width: 100px; Max-height:100px; width:auto; height:auto;">
<?
$p++;
$lastimg = $img;
}
?>
</div>
<br><br>

<div class="preview<?echo $b;?>" align="center" Style="width:640px; margin:0 auto; overflow:hidden;">
<img name="preview<?echo $b;?>" src="<?echo $lastimg;?>" style="float:left; margin-right:10px; Max-width: 680px; Max-height:680px; width:auto; height:auto;" alt=""/>
</div>
<div style="width:680px; height:auto; overflow:hidden; background: rgba(66, 95, 149, 1);">
<p id='exifdata<?echo $b;?>'>testing
</p>
</div>


<?
}
?>
</article>
</Section>
</div>

<?
$b++;
}

?>
</body>
</html>

0

exif html innerhtml javascript php

Решение

Другие решения

Фон.

Проблема может быть связана с неправильным форматированием тегов в файле изображения. А именно, этот текст тега записывается как Unicode (16), но указывается как ASCII в полях заголовка тега. Форматы тегов описаны в Exif 2.2 с 2002 года и Exif 2.3 (JEITA CP-3451) с 2012 года. Тот же результат возникнет, если exif_read_data обрабатывает все как ASCII независимо от флагов формата.

Имеются сообщения о том, что программное обеспечение для обработки файлов изображений вносит ошибки в теги изображений Unicode. Например, эта ошибка KDE Пользовательские комментарии EXIF со специальными символами помечаются как ASCII может все еще быть проблемой в зависимости от истории изображения.

Сам символ is является Unicode «Заменяющий символ», десятичная точка кода 65533, используемая для замены недопустимых символов в строке. Для текста ASCII, хранящегося в виде 16-битных значений, старший байт равен нулю (символ ASCII NUL) и, скорее всего, заменяется символом. То, где происходит замена, не доказано — теги изображений могут быть помечены как Unicode и содержать символы замены (маловероятно), exif_read_data() возможно, они вставляются (вероятно, но не доказано), или браузер может заменять символы NUL заменяющими символами (маловероятно или зависит от браузера).

Могу ли я предложить проверить следующее:

Настройка PHP должен быть корректным для символов Unicode и модуль mbstring должен быть доступен. Документация плохо читается, если вам приходится работать с изображениями из разных систем, требующих другой настройки.
Быстрое решение с очевидными ограничениями состояло бы в том, чтобы преобразовать строки тегов в US-ASCII или, по крайней мере, в 8-битные октеты Latin1, удалив NUL и символы замены. Функция для этого
```
function annul(s)
{   return s.replace(/[\u0000|\uFFFD]/g, "");
}
```

Это, по крайней мере, очистило строки в вашем посте, но не восстановит присутствующие символы Юникода.

Более сложный подход состоит в том, чтобы восстановить значения Unicode 16 из пар символов, возвращаемых в строках тегов. Необходимость сделать это будет означать, что есть серьезные проблемы с PHP, или файлы изображений плохо закодированы, или оба, и могут работать не во всех случаях.
Идеально было бы установить PHP exif.ini для Unicode, и все изображения были правильно помечены объявлениями кодировки, подходящими для установки.

Решение о том, какие действия предпринять, во многом зависит от того, поддерживает ли ваш сайт Unicode и глобальные языки.

0

Источник

Accepted Answer

Я наконец нашел функцию, которая разрешила проблему …

https://stackoverflow.com/a/20103241/1112764

Спасибо!
Я испробовал все разные способы кодирования / декодирования, переназначения различных программ в JPG — мне пришлось использовать этот способ для удаления недопустимых символов.

0