Question

是否可以从计算样式中获取图像数据并将其保存在变量或对象中供以后使用？

例如，在HTML网页中，我使用CSS加载背景：

document.body.style.background = "url(...path/image.php) #FFF";

现在我需要保存document.body.style.background中加载的图像因为我以后会用它。我想将图像保存在localStorage中作为DATA URI，并在我重新启动浏览器后访问它。

我无法使用AJAX或向服务器发送请求。我必须从加载的网页以某种方式复制/保存。但是，我不确定这是否可行，如果是，

我无法使用图片网址，因为网址每次都会生成随机图片，类似于http://url.php ...而不是标准图片网址

也许使用HTML5 Canvas可以从document.body中复制？网页上填充了其他子元素

Answer 1

创建画布＆gt; object - 将生成的图像加载到画布中，然后使用canvas.toDataURL来获取图像的base64表示。然后，您可以将该base64字符串存储为变量，并在需要时重新加载它。

此答案中的详细示例：How to convert image into base64 string using javascript

Answer 2

没有办法通过画布拍摄任何元素的真实屏幕截图。 _{（至少在WebAPI中没有，在某些浏览器中，允许扩展名）。}

您必须创建一个新的Image对象，将其src设置为背景图像之一，然后才能在画布上绘制它。

但如果服务器以no-cache回答，则Image只会加载除背景设置之外的其他图片。

所以你必须以另一种方式做事：

首先通过Image对象加载图像。
然后将此图像绘制到画布并通过调用canvas.toDataURL()获取其dataURI版本。
最后，将元素的背景设置为刚刚提取的dataURI。

// first load your image from the server once, into an Image object
var img = new Image();

// wait for the image has loaded
img.onload = function(){
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.drawImage(this, 0,0);
  // since I'm receiving photos, jpeg is better
  var dataURL = canvas.toDataURL('image/jpeg');
  // if we could use local storage in snippets...
  //localStorage.setItem('background-image', dataURL);
  // since we can't
  saved = dataURL;
  document.body.style.backgroundImage = 'url('+dataURL+')';
}

// I'm loading it from an external server
img.crossOrigin = 'anonymous';
img.src = 'http://lorempixel.com/200/200/?'+Math.random();

// since we can't use local storage in sand-boxed iframe
// we will use a global in this snippet
var saved;

button.onclick = function(){
  // if we could use localStorage
  // var saved = localStorage.getItem('background-image');
  document.getElementById('result').style.backgroundImage = 'url('+saved+')';
  };

div{width: 200px; height: 200px; border: 1px solid; background-color: white;}
body{width: 100vw; height: 100vh; margin: 0;}

<button id="button">set the div's background to the saved one</button>
<div id="result"></div>

请注意，localStorage受限制，因此根据您的图片，您可能希望使用image/jpeg方法的toDataURL()压缩类型。

此外，您将受到跨域策略的限制，如果php页面不在同一个域中，请确保correctly configured接受跨源请求并设置Image对象的crossOrigin属性为"anonymous"。

Ps：您还可以使用XMLHttpRequest and a FileReader()来避免画布部分，这将涉及不同的跨源限制。

将css计算的背景图像保存为变量或对象供以后使用

2 个答案: