Greasy Fork

Greasy Fork is available in English.

转换微信公众号图片为兼容格式

默认为WEBP格式,此脚本将其转换为PNG格式

目前为 2019-10-08 提交的版本,查看 最新版本

// ==UserScript==
// @name         转换微信公众号图片为兼容格式
// @description  默认为WEBP格式,此脚本将其转换为PNG格式
// @namespace    http://greasyfork.icu/users/197529
// @author       kkocdko
// @version      0.1
// @match        *://mp.weixin.qq.com/*
// ==/UserScript==
'use strict'

addFloatButton('转换全部图片到兼容格式', () => {
  const { scrollX, scrollY } = window
  document.querySelectorAll('img').forEach(el => {
    el.scrollIntoView()
    if (el.dataset.src) {
      el.src = el.dataset.src
    } else {
      el.src = el.src.replace('=webp', '=png')
      // convertImage(el, 'image/jpeg', 0.75)
    }
  })
  window.scrollTo(scrollX, scrollY)
})

// function convertImage (imageEl, meta, quality) {
//   const canvas = document.createElement('canvas')
//   const image = new window.Image()
//   image.onload = () => {
//     canvas.width = image.width
//     canvas.height = image.height
//     canvas.getContext('2d').drawImage(image, 0, 0, canvas.width, canvas.height)
//     imageEl.src = canvas.toDataURL(meta, quality)
//   }
//   image.src = imageEl.src
// }

function addFloatButton (text, onclick) {
  return (document.addFloatButton = document.addFloatButton || (() => {
    const buttonContainer = document.createElement('div').attachShadow({ mode: 'open' })
    buttonContainer.innerHTML = '<style>:host{position:fixed;top:3px;left:3px;z-index:3333333333;height:0}#i{display:none}*{float:left;margin:3px;padding:1em;outline:0;border:0;border-radius:4px;background:#2196f3;box-shadow:0 1px 3px 0 #00000022;color:#fff;font-size:14px;line-height:0;transition:.3s}:active{background:#63b5f7;box-shadow:0 2px 5px 0 #00000033}button:active{transition:0s}:checked~button{visibility:hidden;opacity:0;transform:translateY(-3em)}label{border-radius:50%}:checked~label{opacity:.3;transform:translateY(3em)}</style><input id=i type=checkbox><label for=i></label>'
    document.body.appendChild(buttonContainer.host)
    return (text, onclick) => {
      const button = document.createElement('button')
      button.textContent = text
      button.addEventListener('click', onclick)
      return buttonContainer.appendChild(button)
    }
  })())(text, onclick)
}