// ==UserScript==
// @name MutliQRCode
// @namespace https://greasyfork.org/zh-CN/users/1073349
// @version 0.5.3
// @description PC端和移动端都可用的二维码识别
// @author 4ehex
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_xmlhttpRequest
// @match *://*/*
// @icon data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgc3R5bGU9IndpZHRoOiAxZW07aGVpZ2h0OiAxZW07dmVydGljYWwtYWxpZ246IG1pZGRsZTtmaWxsOiBjdXJyZW50Q29sb3I7b3ZlcmZsb3c6IGhpZGRlbjsiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwLWlkPSI3NjA1Ij48cGF0aCBkPSJNMTg2LjAyNjY2NyAwaDY1MS45NDY2NjZRMTAyNCAwIDEwMjQgMTg2LjAyNjY2N3Y2NTEuOTQ2NjY2UTEwMjQgMTAyNCA4MzcuOTczMzMzIDEwMjRIMTg2LjAyNjY2N1EwIDEwMjQgMCA4MzcuOTczMzMzVjE4Ni4wMjY2NjdRMCAwIDE4Ni4wMjY2NjcgMHoiIGZpbGw9IiMzNjg5RjUiIHAtaWQ9Ijc2MDYiPjwvcGF0aD48cGF0aCBkPSJNMjEzLjMzMzMzMyAzMDQuNjRBOTAuODggOTAuODggMCAwIDEgMzA0LjIxMzMzMyAyMTMuMzMzMzMzaDkwLjg4djQyLjY2NjY2N0gzMDYuMzQ2NjY3YTQ1LjY1MzMzMyA0NS42NTMzMzMgMCAwIDAtNDYuNTA2NjY3IDQ4LjY0djkxLjczMzMzM0gyMTMuMzMzMzMzek0zOTYuOCA4MTAuNjY2NjY3SDMwNi4zNDY2NjdhOTAuNDUzMzMzIDkwLjQ1MzMzMyAwIDAgMS05MC44OC05MS4zMDY2Njd2LTkxLjczMzMzM2g0Ni41MDY2NjZ2OTEuNzMzMzMzQTQ1LjY1MzMzMyA0NS42NTMzMzMgMCAwIDAgMzA4LjA1MzMzMyA3NjhoOTAuODhhMjk4LjY2NjY2NyAyOTguNjY2NjY3IDAgMCAwLTIuMTMzMzMzIDQyLjY2NjY2N3pNODEwLjY2NjY2NyA3MTkuMzZBOTAuNDUzMzMzIDkwLjQ1MzMzMyAwIDAgMSA3MTcuNjUzMzMzIDgxMC42NjY2NjdINjI3LjJ2LTQ2LjkzMzMzNGg5MC40NTMzMzNhNDUuNjUzMzMzIDQ1LjY1MzMzMyAwIDAgMCA0Ni41MDY2NjctNDYuNTA2NjY2di05MS4zMDY2NjdIODEwLjY2NjY2N3pNMjEzLjMzMzMzMyA0ODcuNjhoNTk1LjJ2NDYuOTMzMzMzSDIxMy4zMzMzMzN6TTgxMC42NjY2NjcgMzk2LjM3MzMzM2gtNDguNjRWMzA0LjY0YTQ1LjY1MzMzMyA0NS42NTMzMzMgMCAwIDAtNDYuMDgtNDYuNTA2NjY3aC05MC44OFYyMTMuMzMzMzMzaDkwLjg4YTkwLjg4IDkwLjg4IDAgMCAxIDkwLjg4IDkxLjMwNjY2N3oiIGZpbGw9IiNGRkZGRkYiIHAtaWQ9Ijc2MDciPjwvcGF0aD48L3N2Zz4=
// @require https://update.greasyfork.icu/scripts/469053/1207999/jsQR.js
// @grant unsafeWindow
// @license GPL
// @downloadURL none
// ==/UserScript==
(function() {
'use strict';
//全局变量 被选中的图片src
var g_img_src = null;
var g_is_moblie_env = isPhone();
var g_cors_proxy = ['GM_xmlhttpRequest', 'https://api.allorigins.win/get?url=', 'https://corsproxy.io/?'];
var g_usr_diy_cors = GM_getValue('usr_diy_cors', '');
var g_cur_use_cors = GM_getValue('cur_use_cors', g_cors_proxy[0]);
//适配移动端 很多移动端浏览器并没有实现油猴接口
//添加'识别二维码'按钮样式
let btn_style = document.createElement('style');
btn_style.type = 'text/css';
if (!g_is_moblie_env){
btn_style.innerText = `.idtfy_div{width:5.5vw;height:2.1vh;font-size:1vh;color:#000000;background:#F8F8FF;border-radius:1.5vh;border:0.12vh solid #f2cac9;line-height:2vh;text-align:center;vertical-align:middle;z-index:99999999;display:none;position:absolute;top:20;left:20;cursor:pointer;box-shadow:0.13vh 0.13vh 0.1vh #888888;}`;
//GM_addStyle(`.idtfy_div{width:5.5vw;height:2.1vh;font-size:1vh;color:#000000;background:#F8F8FF;border-radius:1.5vh;border:0.12vh solid #f2cac9;line-height:2vh;text-align:center;vertical-align:middle;z-index:99999999;display:none;position:absolute;top:20;left:20;cursor:pointer;box-shadow:0.13vh 0.13vh 0.1vh #888888;}`);
}
else{
btn_style.innerText = `.idtfy_div{width:25vw;height:3vh;font-size:1.6vh;color:#000000;background:#F8F8FF;border-radius:1.5vh;border:0.14vw solid #f2cac9;line-height:3vh;text-align:center;vertical-align:middle;z-index:99999999;display:none;position:absolute;top:20;left:20;cursor:pointer;box-shadow:0.15vw 0.15vw 0.13vw #888888;}`;
}
document.head.appendChild(btn_style);
//添加'识别二维码'按钮
var identify_div = document.createElement('div');
identify_div.id = 'identify_div';
identify_div.className = 'idtfy_div';//👇添加一个图标
identify_div.innerHTML = `[options_] 选用 `,
options_html, usr_input_html = `选用 `;
for (let i = 0, len = g_cors_proxy.length; i < len; i++){
options_html += `${g_cors_proxy[i]} `;
}
select_html = select_html.replace('[options_]', options_html);
let setting_html = `` + select_html + `
`+ usr_input_html + `
关闭 当前代理:' + g_cur_use_cors + '
' + setting_html, 60);
setTimeout(()=>{
document.getElementById("sys_cors_btn").onclick = function(){
let obj = document.getElementById('cors_select');
let text = obj.options[obj.selectedIndex].text; // 选中文本
GM_setValue('cur_use_cors', text);
g_cur_use_cors = text;
notie.alert_hide();
};
document.getElementById("usr_cors_btn").onclick = function(){
let obj = document.getElementById('usr_cors_input');
let text = obj.value;
GM_setValue('usr_diy_cors', text);
g_usr_diy_cors = text;
GM_setValue('cur_use_cors', text);
g_cur_use_cors = text;
notie.alert_hide();
};
document.getElementById("cors_close_btn").onclick = function(){notie.alert_hide();};
}, 500);
}
//通过UA判断是否是移动端
function isPhone() {
var info = navigator.userAgent;
var isPhone = /mobile/i.test(info);
return isPhone;
}
//从传入的元素中获取IMG元素的src 若没有则返回null
function GetQRSrc(ele){
let ret_src = null;
let ele_tag_name = ele.tagName.toLowerCase();//'IMG' 'svg' 'CANVAS'
if (ele_tag_name == 'img'){
if (ele.src != null) ret_src = ele.src;
}
else if(ele_tag_name == 'svg'){
ret_src = svg2b64(ele);
}
else if (ele_tag_name == 'canvas'){
ret_src = ele.toDataURL();
}
else{
//获取同胞元素 判断完同胞元素还需要判断子元素 因为可能获取到不是选择的图片
for (let i = 0, sibling = ele.nextElementSibling;i < 6 && sibling != null; sibling = sibling.nextElementSibling, i++){
if (sibling.tagName == 'IMG' && sibling.src != null){
ret_src = sibling.src;
break;
}
}
//遍历子元素看看是否有图片
var childs = ele.childNodes;
if (childs.length >= 6) return ret_src;
for(var i = childs.length - 1; i >= 0; i--) {
if (childs[i].tagName == 'IMG' && childs[i].src != null){
ret_src = childs[i].src;
break;
}
}
}
return ret_src;
}
//将图片URL转为jsqr需要的数据
function Img2CanvasData(img_url){
return new Promise((resolve, reject) => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
const img = new Image();
//img.crossOrigin = '';
img.onerror = () => {
notie.alert(3, 'Image Err!', 4);
};
img.onload = () => {
try{
ctx.drawImage(img, 0, 0,300,300);
let data = ctx.getImageData(0, 0, 300, 300).data;
resolve(data);
}
catch(e){
reject(e);
}
};
img.src = img_url;
});
}
//cb_ok\cb_failed识别成功\失败时的回调函数
function IdentifyQRCode(data, cb_ok, cb_failed){
Img2CanvasData(data).then( res=>{
const code = jsQR(res, 300, 300, {
inversionAttempts: "dontInvert",
});
if (code) cb_ok(code.data, data); else cb_failed('IdentifyError', data);
}).catch(err=>{
cb_failed(err.name, data);
});
}
//'识别二维码'按钮事件
function OnClickedIdentifyBtn(){
if ((typeof jsQR != 'function')){
notie.alert(2, '外部JS脚本未加载成功!', 3);
return;
}
if (g_img_src == null){
notie.alert(2, '未选中任何图片', 2);
}
else {
IdentifyQRCode(g_img_src, callback_ok, function(msg, url_){
if (msg == 'IdentifyError'){
notie.alert(3, '识别失败!', 3);
}
else if (msg == 'SecurityError'){
if (g_cur_use_cors == 'GM_xmlhttpRequest'){//使用GM_xmlhttpRequest
SyncXmlHttpRequest(url_, 'GET').then(data=>{
if (data != null){
IdentifyQRCode(data, callback_ok, function(){
setTimeout(()=>{
notie.alert(3, '识别失败!', 3);
}, 500);
});
}
else{
notie.alert(3, '图片数据为空!', 3);
}
}).catch(err=>{
notie.alert(3, 'SyncXmlHttpRequest Err: ' + err, 6);
});
}
else{//使用跨域代理服务器
if (g_cur_use_cors == '' || !isMaybeURL(g_cur_use_cors)) {
notie.alert(2, '代理服务器不是一个正确的网址', 3);
return;
}
notie.alert(4, '等待跨域代理服务器返回图片数据⋘ 𝑃𝑙𝑒𝑎𝑠𝑒 𝑤𝑎𝑖𝑡... ⋙
', 20);
let cors_proxy = g_cur_use_cors + encodeURIComponent(url_);
fetchImage(cors_proxy).then((img_src)=>{
if (img_src != null){
IdentifyQRCode(img_src, callback_ok, function(){
setTimeout(()=>{
notie.alert(3, '识别失败!', 3);
}, 500);//不等待500ms这个提示框会弹不出来，不知道为啥
});
}
else{
notie.alert(3, '图片数据为空!', 3);
}
});
}
}
else{
notie.alert(3, '未知错误!', 3);
}
});
}
document.getElementById("identify_div").style.display = 'none';
}
//'复制'按钮单击事件
function OnClickedCopyBtn(){
//GM_setClipboard(document.getElementById("notie_all_text").innerText);
navigator.clipboard.writeText(document.getElementById("notie_all_text").innerText);
notie.alert(1, '复制成功!', 2);
}
//判字符串是否可能为URL
function isMaybeURL(str) {
let is_maybe = false;
if ((str.indexOf('://') != -1) ||
(str.substr(0, 3) == 'www') ||
(str.indexOf('.com') != -1 || str.indexOf('.cn') != -1 || str.indexOf('.org') != -1 || str.indexOf('.net') != -1) ||
(str.indexOf('.') != -1 && str.indexOf('/') != -1)) is_maybe = true;
return is_maybe;
}
//fetch获取图片
async function fetchImage(get_url) {
try {
const response = await fetch(get_url, {mode: "cors"});
if (!response.ok) {
throw new Error("Network response was not OK");
}
let img_data = null,
data_type = response.headers.get("content-type"), data;
if (data_type == "application/json"){
data = await response.json();
if (data.contents.length != 0) {
img_data = data.contents;
}
}
else if (data_type.indexOf('image') != -1){
data = await response.blob();
img_data = URL.createObjectURL(data);
}
return img_data;
} catch (error) {
console.error("[Debug] There has been a problem with fetch operation:" + error);
notie.alert(3, 'There has been a problem with fetch operation:' + error, 3);
return null;
}
}
//以同步方式发送跨域请求
function SyncXmlHttpRequest(request_url, method_type) {
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: method_type,
url: request_url,
responseType: "blob",
onload: function(response) {
if (response.status != 200){
return reject("Response Not 200 OK!");
}
if (typeof response.response == 'undefined') return reject('你的油猴不支持blob返回值');
let data = response.response, img_data;
if (data.length != 0){
//img_data = b64EncodeUnicode(data);
//console.log(img_data);
//return resolve('data:image/png;base64,' + img_data);
img_data = URL.createObjectURL(data);
return resolve(img_data);
}
return reject('response data is empty!');
},
onerror: function(err) {
return reject(err);
}
});
});
}
function callback_ok(text, url_){
let display_text = text, ope_html = '';
if (g_is_moblie_env && (text.length >= 40)){//如果是移动端 且识别内容过长 则隐藏一部分内容
display_text = text.substr(0, 35) + '...';
}
if (isMaybeURL(text)){
let jump_url = text;
if (jump_url.indexOf('://') == -1) jump_url = 'https://' + jump_url;
ope_html = ope_html.replace("[placeholder_]", '转到 ');
}
else{
ope_html = ope_html.replace("[placeholder_]", '搜索 ');
}
setTimeout(()=>{
notie.alert(1, ''+ text +' 识别到以下文本:' + display_text + '
' + ope_html, 20);
setTimeout(()=>{
document.getElementById("notie_copy_btn").onclick = OnClickedCopyBtn;
document.getElementById("notie_close_btn").onclick = function(){notie.alert_hide();};
}, 500);
}, 300);
}
//svg转base64
function svg2b64(svg_ele) {
const s = new XMLSerializer().serializeToString(svg_ele);
const ImgBase64 = `data:image/svg+xml;base64,${window.btoa(s)}`;
return ImgBase64;
}
function b64EncodeUnicode(str) {
// first we use encodeURIComponent to get percent-encoded Unicode,
// then we convert the percent encodings into raw bytes which
// can be fed into btoa.
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function toSolidBytes(match, p1) {return String.fromCharCode('0x' + p1);}));
}
})();