wangEditor-輕量級富文本+PHP 本地圖片

wangEditor-輕量級富文本+PHP 本地圖片采坑之旅

段時間整富文本整的我頭疼，一開始用的是百度的ueditor編輯器

優點：插件多，基本滿足各種需求，類似貼吧中的回復界面。

缺點：不再維護，文檔極少，使用并不普遍，圖片只能上傳到本地服務器，如果需要上傳到其他服務器需要改動源碼，較為難辦，加載速度慢。

后放棄ueditor，主要原因是無法上傳視頻，連官網的demo都無法上傳.....

最后找了個既輕量級又能滿足需求的編輯器----wangEditor，而且是中文版的，方便閱讀

編輯器官網：http://www.wangeditor.com/

現在進入正文：

1、代碼示例如下。注意，以下代碼中無需引用任何 CSS 文件?。?！

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>wangEditor demo</title>
</head>
<body>
 <div id="editor">
 <p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
 </div>
 <!-- 注意， 只需要引用 JS，無需引用任何 CSS ?。?！-->
 <script type="text/javascript" src="/wangEditor.min.js"></script>
 <script type="text/javascript">
 var E=window.wangEditor
 var editor=new E('#editor')
 // 或者 var editor=new E( document.getElementById('editor') )
 editor.create()
 </script>
</body>
</html>

2、demo如下（菜單都可以自定義）

HTML部分：

 <div id="editor">
 <p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
 </div>

JS部分：

 <script type="text/javascript">
 var E=window.wangEditor
 var editor=new E('#editor')
 editor.create()
</script>

寫到這大部分需要的功能以及都有了

我主要介紹的是上傳本地圖片需要注意的

下面是配置上傳本地圖片

// 自定義菜單配置
			editor.customConfig.menus=[
				'head', // 標題
				'bold', // 粗體
				'fontSize', // 字號
				'fontName', // 字體
				'italic', // 斜體
				'underline', // 下劃線
				'strikeThrough', // 刪除線
				'foreColor', // 文字顏色
				'backColor', // 背景顏色
				'link', // 插入鏈接
				'justify', // 對齊方式
				'quote', // 引用
				'image', // 插入圖片
				'video', // 插入視頻
				'code', // 插入代碼
				'undo', // 撤銷
				'redo' // 重復
			];
		editor.customConfig.uploadImgServer="to_uploads.php"; // 上傳圖片到服務器
 editor.customConfig.uploadFileName="image"; //文件名稱 也就是你在后臺接受的 參數值
 editor.customConfig.uploadImgHeaders={ //header頭信息 
 'Accept': 'text/x-json'
 }
 // 將圖片大小限制為 3M
 editor.customConfig.uploadImgMaxSize=3 * 1024 * 1024 //默認為5M
 editor.customConfig.uploadImgShowBase64=false; // 使用 base64 保存圖片
 // editor.customConfig.customAlert=function (info) { //自己設置alert錯誤信息
 // // info 是需要提示的內容
 // alert('自定義提示：' + '圖片上傳失敗，請重新上傳')
 // };
 editor.customConfig.debug=true; //是否開啟Debug 默認為false 建議開啟 可以看到錯誤
 editor.customConfig.uploadImgTimeout=3000;
 //圖片在編輯器中回顯
 editor.customConfig.uploadImgHooks={ 
 error: function (xhr, editor) {
 alert("2：" + xhr + "請查看你的json格式是否正確，圖片并沒有上傳");
 // 圖片上傳出錯時觸發 如果是這塊報錯 就說明文件沒有上傳上去，直接看自己的json信息。是否正確
 // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
 },
 fail: function (xhr, editor, result) {
 // 如果在這出現的錯誤 就說明圖片上傳成功了 但是沒有回顯在編輯器中，我在這做的是在原有的json 中添加了
 // 一個url的key（參數）這個參數在 customInsert也用到
 // 
 alert("1：" + xhr + "請查看你的json格式是否正確，圖片上傳了，但是并沒有回顯");
 },
 success:function(xhr, editor, result){
 //成功 不需要alert 當然你可以使用console.log 查看自己的成功json情況 
 //console.log(result)
 console.log(result)
 },
 customInsert: function (insertImg, result, editor) {
 //console.log(result);
 // 圖片上傳并返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片?。。。?
 // insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果
 // 舉例：假如上傳圖片成功后，服務器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片： 
 insertImg(result.data[0]);
 }
 };
 editor.customConfig.showLinkImg=true; //是否開啟網絡圖片，默認開啟的。
 //生成
		editor.create();

3、其實以前這么多代碼重點是：第120行

// 配置服務器端地址

4、to_uploads.php代碼

<?php 
 //圖片文件的生成
 $savename=date('YmdHis',time()).mt_rand(0,9999).'.jpeg';//localResizeIMG壓縮后的圖片都是jpeg格式
 //生成文件夾 （服務器上傳圖片路徑地址）
 $rpath='/usr/share/nginx/html/proj/aycdj/admin';
 //獲取圖片文件的名字
 $fileName=$_FILES["file"]["name"];
 //圖片保存的路徑
 $savepath=$rpath.'/uploads/'.$savename;
 $savepath1='/uploads/'.$savename;
 //生成一個URL獲取圖片的地址（xxxx：服務器域名 eg：http://www.baidu.com）
 $url="xxxxx/aycdj/admin" . $savepath1;
 //返回數據。wangeditor3 需要用到的數據 json格式的
 $ret=move_uploaded_file($_FILES["image"]["tmp_name"],$savepath);
 $file_road=array('errno'=>0,'data'=>array($url));
 echo json_encode($file_road);
?>

需要注意的是：最后接口返回的數據格式必須是數組或者json格式的，否則報錯！！

如有關于次編輯器的其他需求可以查看官網：https://www.kancloud.cn/wangfupeng/wangeditor3/332599

大家若有其他問題，歡迎大家留言哦！

網站開發時，我們有時需要用到文章中的圖片，在文章列表的標題中顯示，顯得圖文更豐富。

在php網頁中怎樣把文章中所有圖片地址提取出來呢？下面為你提供一個方法。直接上代碼。

<?php

//這個是提取圖片的核心代碼

function getAllImg($str){

$pattern="/\<img src=\"(.+?)\"\>/";

preg_match_all($pattern,$str,$match);

$src=$match[1];

return $src;

}

<?php

ob_start();

try {

session_start();

} catch (Exception $e) {

print $e->getMessage();

}

ini_set('display_errors','On');

//error_reporting(0);

//set_time_limit(0);//設置超時，0表示不限時

date_default_timezone_set('PRC');//中國時區

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<?php

//假如文章內容是$str

$str='123<img src="image/1.jpg">456<img src="image/2.jpg">789';

$arr=getAllImg ($str) ;//這是所有圖片地址的集合調用時$arr[0]是第一張圖片，$arr[1]是第二張圖片…

print_r ($arr) ;

</body>

</html>

可以復制以上代碼學習測試。如果對你有幫助，請幫忙轉發一下，謝謝。

何識別圖片是否P過？收下這8個圖片識別神器！

在這個萬物皆可 PS 的時代，一張圖片的真假似乎越來越難判定。例如網上突然傳出來一張截圖，你要怎么才知道這是真的證據，還是 PS 出來的謠言？如何快速鑒定一張圖片有沒有被更改過，本文就來給大家介紹 8 種可以檢測圖像更改的工具，來看看吧！

??EXIF/元數據

?通常來說，圖片生成時是會帶有 Exif 等圖片信息的。例如用手機拍攝的照片。EXIF 代表可交換圖像文件，它用于在使用 JPG 壓縮的數碼照片中存儲信息。

網站鏈接：http://exifdata.com/index.php

EXIF 文件中包含的信息包括手機型號、相機信息，如光圈、閃光燈、ISO 編號、曝光、快門速度、鏡頭、分辨率、白平衡和 GPS 坐標。而用 PS 處理過的圖片，也會帶有 Photoshop 的軟件信息。

此類數據可用于各種調查。比如調查相機類型，或者照片的 GPS 坐標來尋找某人的位置。有許多工具可用于查看 EXIF 數據，包括只需右鍵單擊圖像并轉到詳細信息。

當我們訪問 ExifData.com 時，我們需要從計算機上傳圖像或提交 URL。

來自 exifdata.com 的屏幕截圖

??圖片加載到網站后，我們就可以在圖片右側看到詳細信息摘要。點擊左側的“詳細”按鈕提供更多詳細信息，例如文件權限、大小、GPS 坐標（如果可用）等。

來自 exifdata.com 的詳細摘要

?因此，我們可以通過 Exif 信息，來判別某張圖片是否是未經篡改的原圖。最簡單的方法，自然就是直接看文件頭了。例如一張圖片是在 PS 中修改過、然后保存的，那么用記事本開啟這張圖片，就可以在它的文件頭中，找到 “Photoshop”的字樣，如下圖所示：

用記事本打開圖片文件，有 “Photoshop”字樣，說明這是一張用 PS 保存的圖片

?能修改圖片的軟件不止 PS，如果是用其他軟件來修改，我們還可以通過第三方軟件來鑒別其 Exif，例如下面的這款 “JPEGsnoop”。

?JPEGsnoop 是一款免費的 Windows 應用程序，可檢查和解碼 JPEG、MotionJPEG AVI 和 Photoshop 文件的內部細節。它還可以用于分析圖像的來源以測試其真實性。

網站地址?

?https://www.impulseadventure.com/photo/jpeg-snoop.html

不僅可以確定數碼相機在拍攝照片時使用的各種設置（EXIF 元數據，IPTC），而且還可以提取指示相機在保存照片時使用的 JPEG 圖像壓縮的質量和性質的信息。每個數碼相機都指定了壓縮質量級別，其中許多級別大不相同，導致某些相機產生的 JPEG 圖像比其他相機好得多。

JPEGsnoop 報告了大量信息，包括：量化表矩陣（色度和亮度）、色度子采樣、估計 JPEG 質量設置、JPEG 分辨率設置、霍夫曼表、EXIF 元數據、Makernotes、RGB 直方圖等。

如果我們要鑒定一張圖片是否被修改過，可以直接將圖片拖移到它的界面當中，JPEGsnoop 就會對圖片的 Exif 等信息進行分析。JPEGsnoop 呈現的分析非常多，但我們只需要關注最下面的 “ASSEMSSMENT”一項，例如下圖：

根據 JPEGsnoop 給出的信息，這張圖片是經過處理或者編輯的，也就是說它不是原圖。再看這張圖，JPEGsnoop 判斷它就是原圖，沒有經過任何 PS，可以確定為真了。

鑒別出這是原始圖片

?反圖像搜索

反向圖像搜索可用于驗證照片、WhatsApp 圖像、屏幕截圖和 Internet 來源。

記者可以使用反向搜索選項來查找圖片的原始來源或了解圖片首次在 Internet 上發布的大概日期。攝影師可以使用“按圖像搜索”功能了解其他未經許可使用其照片的網站。

那么，如何執行正確的反向圖像搜索？

首先，我們需要一張任何類型的照片，我們可以使用一張有問題的奧巴馬照片。將照片保存至電腦，點擊“上傳圖片”按鈕，然后將該圖片上傳即可。接下來，單擊“顯示匹配圖像”按鈕，它會將您的照片發送到 Google、Bing 或 Yandex 的圖像數據庫并顯示視覺上相似的照片。在這里，我們可以選擇 Yandex 來演示。

在 Yandex 主頁上，您需要選擇圖像，然后選擇相機圖標在計算機上找到保存的照片，或者也可以粘貼網址。

Yandex 主頁截圖

如何使用相機圖標打開圖像

?滾動瀏覽圖像列表后，我們看到了原始圖像，它向我們展示了第一張圖像是經過數字修改的。因此，有時候我們需要滾動瀏覽一堆圖像才能找到所需的內容。

此外，有一些有用的免費工具可以讓反向圖像搜索更容易。RevEye 是一個 Chrome 插件，可以搜索 Bing、Google、Yandex、TinEye 和百度。使用 RevEye，您只需右鍵單擊圖像并直接轉到列表中的相應搜索引擎。

Forensically

網站鏈接：https://29a.ch/photo-forensics/#forensic-magnifier

通過 Exif 鑒別圖片是否是原圖，的確是行之有效的，但這種方法也有其局限，那就是它只能鑒定圖片是否是原圖，而不能鑒定圖片內容是否保真。例如用 QQ、微信發送的圖片，會被壓縮過，圖片內容沒有被修改，但通過 Exif 鑒別，這仍屬于處理過的圖片，如此一來就顯得意義不大了。

如果你想要鑒別圖片內容是否被修改，那么直接鑒別圖片的內容是更靠譜的方法。問題來了，這屬于技術活，往往需要人工細細甄別，有沒有更加傻瓜智能的方法？還真有，例如 Forensically 這個網站，其中很多功能，都非常方便且實用，可以幫你快速鑒定圖片有沒有被 P 過。

Forensically 是一款基于 Web 的免費圖像分析工具，可用于檢測克隆、錯誤級別分析、圖像元數據、噪聲分析、水平掃描等。錯誤級別分析或 ELA 用于識別 jpg 圖像中不同級別的壓縮偽影。

jpg 圖像保存得越多，壓縮得越多，因此在對其進行分析時，圖像的編輯部分變得不那么均勻，因此更加明顯。許多人通常認為錯誤級別分析是主觀的，但它可以像放大鏡一樣幫助您識別圖像中被隱藏的細節，幫助揭示真相。

克隆檢測：克隆檢測器突出顯示圖像中的復制區域。這些可以很好地指示圖片已被修改。
錯誤級別分析：此工具將原始圖像與重新壓縮的版本進行比較。這可以使操縱區域以各種方式脫穎而出。例如，它們可以比未經處理的類似區域更暗或更亮。
噪聲分析：這個工具基本上是一種反向去噪算法。它不是去除噪聲，而是去除圖像的其余部分。它使用超級簡單的可分離中值濾波器來隔離噪聲。它可用于識別對圖像的操作，如噴槍、變形、扭曲和透視校正克隆。它在高質量圖像上效果最好。
PCA：此工具對圖像執行主成分分析。這提供了一個不同的角度來查看圖像數據，這使得發現某些操作和細節更容易。這個工具目前是單線程的，在大圖像上運行時速度很慢。

首先來說說其中的 “Clone Detection”功能。顧名思義，這可以檢測圖片是否存在克隆現象。通常來說，修改圖片時，例如去除水印、雜物等等，都會用到 PS 中的像素克隆工具，Forensically 的檢測原理就在于識別圖片中重復的像素，來判斷這張圖片有沒有被像素克隆工具修改過，下圖就是 Forensically 默認提供的樣張。

這些紅線連起來的區域，像素是一模一樣的，證明經過 PS 克隆工具的涂抹

?在 Forensically 的鑒別結果中，白斑代表一模一樣的像素，紅線代表相同像素的平移路徑?？梢钥吹剑瑘D中有大面積相鄰像素都是一模一樣的，這就是經過克隆的痕跡，這無疑就是一張 PS 過的圖片。

在下面這張龜頭人的圖像中，我們可以很清楚地看到它被編輯了哪個部分。

?如果我們點擊右側的 Error Level Analysis 按鈕并調整滑塊，我們可以很快看到海龜頭部比身體的其他部分和背景更亮、更不均勻。使用 ELA，所有高對比度和低對比度邊緣都應該看起來相似。如果存在巨大差異，我們就可以懷疑圖像已被更改。

Forensically 中可用的另一個工具是克隆檢測工具。使用此工具，可以查看已克隆圖像的所有位置。此工具的準確性在很大程度上取決于滑塊的位置和原始圖像的質量。

我們再來看一張正常的照片：

沒 P 過的圖，沒有集中分布的相似像素

?這張照片是沒有經過 PS 的，在 Forensically 中盡管也鑒別出了一模一樣的像素，但分布面積小且零散，因此可以認為這張圖片沒有被克隆工具修改過。

Forensically 的 Clone Detection 只適用于使用克隆工具修改的照片，對于其他 P 圖情況，我們可以使用 Forensically 的其他工具鑒別。

例如，For ensically 的 “Error Level Analysis”功能，可以突出顯示某些肉眼看上去差不多、但從計算機角度來看非常突兀的像素。例如這張示例圖中的飛碟，就很顯眼了，這明顯就是 P 上去的。

經過一定算法處理，發現某一塊像素的特征和周圍的明顯不同，這顯然是 P 上去的圖像再來看看原始拍攝未經處理的照片，可見計算機認為像素特征是均勻的，沒有突兀的像素群。

未 P 過的圖像，算法處理后的像素特征是相似的

?當然，Forensically 也是存在局限的，它的原理決定它只能適用于鑒定拍攝的照片（還不能有太多過曝之類造成的 “死像素”），對于截圖或者 CG 這樣的人造圖像不那么適用。但無論如何，如果你想要鑒別某張照片有沒有被 P 過，Forensically 仍是非常不錯的輔助工具。

?FotoForensics

?網站鏈接：http://fotoforensics.com/

FotoForensics 使用先進的算法來解碼任何可能的 photoshopped 圖片和操作；它使用錯誤級別分析 (ELA) 來識別圖像中處于不同壓縮級別的區域。

對于 JPEG 圖像，整個圖像應該處于大致相同的錯誤級別。如果圖像的某個部分處于顯著不同的錯誤級別，則可能表明進行了數字修改。

FotoForensics 旨在簡化評估過程。它像顯微鏡一樣工作——通過突出人眼可能無法識別的偽影和細節。在擁有正確的工具和培訓之間，大多數人可以快速學習如何評估圖片。

FotoForensics 提供算法、用于自定進度學習的在線教程、測試知識的挑戰以及幫助您入門的其他資源。

錯誤等級分析
元數據分析
最后保存質量
顏色調整

FotoForensics 使用一種稱為“ EL?A ”的計算算法“代表錯誤級別分析，它以百分比顯示對原始照片的邊緣、紋理和表面所做的更改的修改。

由于圖片直接來自相機或經過 Photoshop 處理，因此可以輕松找到嵌入在元數據中的其他重要細節。不要試圖對您的私人照片進行分析，因為結果圖像將保存在服務器的公共 URL 中。

在第二張圖片中，您可以如何通過 ELA 識別證書的真實性，其中假郵票的亮度和邊緣的錯誤級別會發生變化。

?Ghiro

網站鏈接：https://www.getghiro.org/

Ghiro 是用于數碼照片和數碼圖像分析的開源軟件。取證分析完全自動化，可以從不同角度搜索或匯總報告數據。Ghiro 旨在幫助您和您的團隊分析大量圖像。

錯誤級別分析 (ELA) ：是一種旨在檢測圖像是否經過編輯的技術。它可以應用于壓縮圖像，即 JPEG 或 PNG。主要思想是原始形式的圖像具有獨特的壓縮級別。重新保存分析的圖像并計算壓縮級別的差異，如果檢測到差異，則編輯的可能性很高。Ghiro 計算錯誤級別并檢測它們之間的差異。

哈希摘要生成：為圖像計算最常見的哈希，以創建它的唯一標識符。計算出的哈希值為：CRC32、MD5、SHA1、SHA224、SHA256、SHA384 和 SHA512

哈希列表匹配：假設您正在搜索圖像并且您只有哈希。您可以提供哈希列表并報告所有匹配的圖像。

字符串提?。禾崛》治鰣D像中包含的所有文本字符串，就像在 unix 字符串工具中一樣。更有趣的（即 URL）被突出顯示。

簽名引擎：簽名提供關于最關鍵數據的證據，以突出重點和常見的曝光。簽名引擎可突出顯示 120 多個簽名的常見曝光。

Amped Authenticate

網站鏈接：https://ampedsoftware.com/authenticate

Amped Authenticate 是用于揭示圖像處理歷史的領先取證軟件。Amped Authenticate 提供了一套強大的工具來確定圖像是未經修改的原始圖像、特定設備生成的原始圖像還是使用照片編輯軟件處理的結果，使其作為證據的可采性受到質疑。Amped Authenticate 被全球數字取證專家和情報機構使用。

Authenticate 是圖像分析師根據數百篇科學論文和研究確定的最有用、最真實的應用程序身份驗證過濾器和技術的集合。這些已被內置到一個易于使用但功能強大的界面中，以幫助調查人員回答圍繞當今數字圖像的真實性和完整性的許多問題。

當前的產品和流程專注于一種或相對較少的科學工具。Authenticate 將多個測試、程序和報告的強大功能整合到一個包中，以提高用戶檢測篡改圖像或確定原創性的能力。

檢測圖像中的篡改區域
確定圖像和文件的真實性
使用批處理工具分析多個圖像
識別用于拍照的設備
基于科學的最強大、最真實的應用程序身份驗證過濾器和技術的集合

Diff Checker

網站鏈接：https://www.diffchecker.com/

Diff Checker 是一個有趣的工具，可以并排或重疊比較兩張照片以查看它們之間的差異。此工具可用于捕捉圖像的微小變化。在 Diff Checker 的主頁上，我們需要上傳兩張圖片進行比較。

DiffChecker.com 的屏幕截圖

?查看更改的第一個選項是淡入淡出。淡入淡出將一個圖像放在另一個頂部，并可以切換不透明度以查看圖像之間的變化。

褪色

?該滑塊選項還會將圖像放在一起，但可以來回滑動到一邊對其他比較。

滑塊

?“差異”選項將兩個圖像放在一起并反轉顏色，以便我們可以看到兩張照片之間的差異。有時，使用差異功能可以捕捉到通常不會看到的細微編輯。

你的眼睛

有許多微妙的線索表明圖像已被數字化改變。我們可以在不使用任何特殊工具的情況下看到許多更改。比如下面這個例子，你可以看到所有的人的陰影與愛因斯坦的陰影方向不一致。此外，愛因斯坦和其他男人之間的對比度和紋理是不同的，他的頭發的邊緣也沒有很好地融合在一起。

最后給大家推薦一個網站 Start.me，里面集合了一些可以幫助分析數字照片進行驗證的有用工具。大家可以試一試，看看哪些工具最適合你的具體情況。

網站鏈接：https://start.me/p/ZGAzN7/verification-toolset

看到這些工具集，大家是不是眼花繚亂了，其實，這些工具的功能都大同小異，我們不一定需要花哨的工具來分析數字照片，許多工具都是免費的，易于使用，而且隨時可用。

數字圖像分析是一個技術活，很難通過軟件算法自動得出圖片是否為真的結果，所以以軟件算法作為輔助，再結合人的經驗和你的眼睛去進行判斷，還是可以大致判斷出來的。希望上面的方法和技巧能幫到大家，如果有什么其他更好思路或者方法，也歡迎在留言區分享交流哦！

原文戳 https://www.uisdc.com/8-picture-detection-tools

在線咨詢

上一篇：如何使用Divi建立會員網站 - 第2部分
下一篇：HTML+CSS基礎入門開發，經典Loading加載

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

wangEditor-輕量級富文本+PHP 本地圖片

Forensically

Amped Authenticate

你的眼睛

您的項目需求