當我們編寫了部落格後，想將部落格內容傳送到微信公眾平臺時，會遇到一個新的阻礙：圖片需要重新上傳。

MD轉成微信樣式後有很多方式，之前我們提到的md.openwrite.cn，或者直接使用OpenWrite中編輯文章後顯示的公眾號預覽功能都能基本滿足要求，但是！複製的內容貼上在微信後，無法解決圖片無法載入的問題，功能實用性大打折扣。

理清思路

失敗的素材的處理

圖片不是微信的，會提示失敗圖片，我們需要通過點選檢視失敗圖片找到對應的圖片，然後選中失敗圖片後，點選圖片->本地上傳再從本地選擇圖片上傳，若提前存圖片庫的，可以從圖片庫中選擇。

重複動作梳理

1、找到失敗圖片，選中失敗圖片

2、獲取失敗圖片路徑

3、點選圖片->本地上傳

4、找到對應失敗圖片的本地路徑

5、點選確定

需要處理的核心問題

1、通過失敗圖片路徑找到本地路徑

2、重複動作太多，需要簡化操作

解決問題

替換圖片路徑為本地路徑

我們可以uTools的自動化助手，幫我們將圖片下載，然後替換成本地的路徑

let path = ENTER.payload
//路徑為https://mixley.stdcdn.com/ 替換為應用中路徑
let url="https://mixley.stdcdn.com/";
let dic="C:/Users/micke/OneDrive/應用/PoweredBy.Cloud/mixley.stdcdn.com/";

//圖片下載儲存路徑
let imgdowndir="E:/mixley/Pictures/Saved Pictures/"

//定義獲取UUID的方法
let getUUID=function(){
  //UUID來自UUID外掛中演算法
  const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
    let r = Math.random() * 16 | 0
    let v = c === 'x' ? r : (r & 0x3 | 0x8)
    return v.toString(16)
  })
  return uuid;
}
//定義執行路徑
let executePath=function(path){
  utools.copyText(path);
  utools.simulateKeyboardTap('v',utools.isMacOs() ? 'command' : 'ctrl');
}
if(path.indexOf(url)>-1){
  path = path.replace(url,dic);
  executePath(path);
}else{
//下面為下載圖片後替換本地路徑
path = imgdowndir+getUUID()+'.png';
//下載
utools.ubrowser.goto(ENTER.payload)
  .wait(500)
  //將Img截圖，儲存為png
  .screenshot("img", path)
  .run({ show: false })
  .then(() => {
    executePath(path)
  })
  .catch(err => { utools.showNotification(err.message) })
}
 

特別說明

如果使用OD作為圖床，再OD中找到應用資料夾，將它設定為始終在此裝置保留，解決同步問題。

解決重複步驟問題

先看下瀏覽器有哪些操作可以讓我們後面進行使用。

瀏覽器特定操作說明

1、Ctrl+L可以進入到link欄，即瀏覽器的位址列（大部分瀏覽器）。

2、輸入javascript:指令可以執行對應頁面對應的指令，如下指令在瀏覽器位址列輸入後可在當前頁面顯示時間戳(注意，javascript:無法可能貼上到瀏覽器，可以先輸入j，再複製粘貼後面的部分)

javascript:(function(){alert((new Date()).valueOf());})();

3、選擇檔案的檔案框選擇中，如果輸入網際網路地址，系統會自動下載檔案，並且跳轉到對應的本地路徑，但是可能存在下載多次。

微信公眾號特定DOM元素及操作分析

咱們不用分析太多微信的內部邏輯，就順著微信公眾號的操作來簡化，咱們是為了簡化操作不是為了破解。

//獲取到ueditor_0編輯器的上下文(iframe)
document.getElementById("ueditor_0")
//下面為具體獲取的document
document.getElementById("ueditor_0").contentWindow.document
//說明，後面的document都是指上面這個方式獲取的。

<!--這個是獲取到的錯誤圖片的大概結構，具體內容分析見下-->
<section class="page_image_error js_catchremoteimageerror js_uneditable custom_select_card js_uneditablemouseover custom_select_card_selected" data-remoteid="c1625917818338" data-scene="catch" data-global="0" data-canretry="1" data-reason="%E6%8B%89%E5%8F%96%E5%9B%BE%E7%89%87%E6%95%B0%E6%8D%AE%E5%A4%B1%E8%B4%A5" data-imgtype="img" data-cacheurl="https://mixley.stdcdn.com/2021/07/maven/clip_image010.jpg" data-filename="undefined" style="width:553px;height:153px;" contenteditable="false"><!--省略--></section>

1、 選中到錯誤的圖片

//獲取方式1 可能存在多個，可以輪詢。
document.getElementsByClassName("page_image_error")[0].click();
//獲取選中圖片
document.getElementsByClassName("page_image_error")[0];

//獲取方式2 .js_msg_next 進行點選，模擬介面上 檢視失敗圖片按鈕，不建議
document.getElementsByClassName("js_msg_next")[0].click();
//獲取選中圖片
document.getElementsByClassName("custom_select_card_selected")[0];

2、獲取到錯誤圖片的地址

//讀取元素中的data-cacheurl,直接使用dataset
document.getElementsByClassName("page_image_error")[0].dataset.cacheurl

3、點選上傳按鈕

//實際研究原始碼，是使用的jq，有興趣的可以把圖片下載後轉base64，直接免開啟上傳按鈕
document.getElementsByName("file")[0].click()

4、貼上並轉換地址，這裡使用替換圖片路徑為本地路徑或者直接複製原地址

5、確定後上傳，其餘的步驟重複

完整程式碼

在uTools自動化工具中，我們編寫程式碼

//定義替換圖片的本地路徑
let url="https://mixley.stdcdn.com/";
let dic="C:/Users/micke/OneDrive/應用/PoweredBy.Cloud/mixley.stdcdn.com/";

//貌似會出現命令序列，需要暫停下
let sleep =function(numberMillis) { 
  let now = new Date(); 
  let exitTime = now.getTime() + numberMillis; 
  while (true) { 
    now = new Date(); 
    if (now.getTime() > exitTime) 
    return; 
  } 
}
//此方法在瀏覽器中執行js語句，可以直接操作dom
let executeJs=function(data){
  let d = 'let url="'+url+'";'+
  'let dic="'+dic+'";';
  //進入到瀏覽器位址列
  utools.simulateKeyboardTap('l',utools.isMacOs() ? 'command' : 'ctrl');
  //這裡不停下，可能會將文字複製到正文
  sleep(100);
  //本來是先輸入j再輸入後面的內容的，但是發現中文輸入有問題，改為錄入後刪除
  let val="_javascript:(function(){"+d+data+"})();"
  utools.copyText(val);
  utools.simulateKeyboardTap('v',utools.isMacOs() ? 'command' : 'ctrl');
  sleep(20);
  utools.simulateKeyboardTap('home',utools.isMacOs() ? 'command' : 'ctrl');
  sleep(20);
  utools.simulateKeyboardTap('delete');
  sleep(20);
  utools.simulateKeyboardTap('enter');
}

//注意，execCommand已廢棄，替代方法暫無。
//執行的內容，獲取圖片地址，注意，結尾需要分號; 別寫//註釋哦，否則無法執行
let urlPath=`
let editDocument = document.getElementById("ueditor_0").contentWindow.document;
let errorimg = editDocument.getElementsByClassName("page_image_error");
/**將文字複製到剪貼簿，後期瀏覽器廢棄後，升級為其它方式**/
let copyText=function(text){
  let input = document.createElement('input');
  input.setAttribute("value", text);
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy"); 
  document.body.removeChild(input);
};
if(errorimg.length){
  errorimg[0].click();
  let cacheurl = errorimg[0].dataset.cacheurl;
  /**替換為本地路徑**/
  cacheurl = cacheurl.replace(url,dic);
  if(cacheurl.indexOf(dic)>-1){
    cacheurl=cacheurl.replaceAll("/", "\\\\");
  };
  copyText(cacheurl);
  /**此處使用模擬開啟檔案上傳的方式，可以替換為其它，原始碼是操作base64的，我懶得解析了，夠用**/
  document.getElementsByName("file")[0].click();
};
`
//開始執行(可以寫迴圈，全部執行完畢，判斷條件)
executeJs(urlPath);
//依據電腦效能停留不同的時間
sleep(500);
utools.simulateKeyboardTap('v',utools.isMacOs() ? 'command' : 'ctrl');

//這裡回車可以你自己按下去,繼續使用前面提供的替換指令碼，將圖片快速下載，使用自帶的下載比較慢
// sleep(20);
// utools.simulateKeyboardTap('enter');

演示效果