如何通过图片在 HTTPS 网站中获取 HTTP 接口数据

<script>
(function() {
var Decode=function(b){var e;e=[];var a=b.width,c=b.height,d=document.createElement("canvas");d.width=a;d.height=c;d=d.getContext("2d");d.drawImage(b,0,0);b=d.getImageData(0,0,a,c);for(d=0;d<a*c*4;d+=4)[].push.apply(e,[].slice.call(b.data,d,d+3));for(a=e.length-1;0===e[a];)e=e.slice(0,a),a--;a="";for(c=0;c<e.length;c+=7)for(b=0;8>b;b++)d=((0==b?0:e[c+b-1])<<7-b&127)+((7==b?0:e[c+b])>>b+1),a+=0==d?"":String.fromCharCode(d);return a};

function getIP(callback) {
var img = new Image();
img.onload = function() {
callback(Decode(this));
};
img.onerror = function() {
alert('接口加载失败。。。');
};
img.crossOrigin = '*';
img.src = 'http://ip.qgy18.com:81/?png=1&_=' + Math.random();
}

document.getElementById('get-ip').addEventListener('click', function() {
var el = document.getElementById('ip-info');
el.innerHTML = 'loading...';
getIP(function(d) {
d = JSON.parse(d);
el.innerHTML = 'IP 信息：' + d.ip + '，' + d.address;
});
});
})();
</script>

<p>这个例子演示了如何通过图片在 HTTPS 网站中获取 HTTP 接口数据，用到了 Canvas。实际上，如果返回值可枚举，连 Canvas 也可以省了 —— 服务端直接生成宽 1px，高 npx 的图片，JS 获取图片高度即可知道返回值。</p>

原文：https://imququ.com/post/use-image-to-transfer-data.html