Question

我抓了一些页面（我知道，我知道，我不应该这样，但我们内部网的信息不能以任何其他可靠的方式提供）。所以我注入一个小的$(...).each(... $.ajax({})); JavaScript，这很好。

我从中得到了大部分信息，但现在我需要这些图像。我可以获取URL，但我需要将它们存储在服务器上（或者首先存储在我的本地机器上）。我无法使用该URL，因为图片位于用户名/密码身份验证之后。

我可以使用$.ajax(multipart/form post - new FormData())构造发送它们吗？

欢迎所有人的想法。

Answer 1

一个想法是将它们编码为base64字符串并以这种方式存储它们。这是演示方法的小提琴：http://jsfiddle.net/c8n9d4ce/

我还发现同样演示此方法的this fiddle。

我的代码来自小提琴：

＆＃13;

    var canvas = document.getElementById("myCanvas");
    var srcImg = document.getElementById("sourceImage");
    var final = document.getElementById("base64Image");

	var img = new Image();
	img.crossOrigin = 'Anonymous';
	img.onload = function(){
		canvas.height = this.height;
		canvas.width = this.width;
	  	canvas.getContext('2d').drawImage(this,0,0);
	  	var dataURL = canvas.toDataURL();
	  	canvas = null;
        final.src = dataURL;
	};
	img.src = srcImg.src;

＆＃13;

img {
    max-width: 100%;
}

＆＃13;

<h1>Original Image</h1>
<img src="https://i.imgur.com/5YJ3HQ9.jpg" id="sourceImage">

<h1>Canvas Rendered Image</h1>
<canvas id="myCanvas"></canvas>

<h1>Base64 Encoded Image</h1>
<img id="base64Image">

＆＃13;

Answer 2

似乎要走的路，我试过了，但是得到了这个错误：“跨源资源共享策略拒绝了跨源图像加载”。我在这个网页上尝试了这个片段（只需复制/粘贴到控制台中）。

function getDataURL(srcImg, done) {
     var img = new Image();
     img.crossOrigin = 'Anonymous';
     img.onload = function(){
        var canvas = document.createElement('canvas');
        canvas.height = this.height;
        canvas.width = this.width;
        canvas.getContext('2d').drawImage(this,0,0);
        done(canvas.toDataURL());
    };
    img.src = srcImg.src;
}
getDataURL($("img")[0], function(data) { 
  console.log(data);
});

图像抓取并发送到服务器

2 个答案: