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

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

创建画布 > 对象 - 将生成的图像加载到画布中，然后使用 canvas.toDataURL 获取图像的 base64 表示。然后，您可以将该 base64 字符串存储为变量并随时重新加载。

此 SO 答案中的详细示例：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 是有限的，因此根据您的图形，您可能希望使用 toDataURL() 方法的 image/jpeg 压缩类型。

另外，你会受到跨域策略的限制，如果php页面不在同一个域中，请确保它是correctly configured来接受跨域请求并设置你Image对象的crossOrigin属性到"anonymous"。

Ps : 你也可以通过使用XMLHttpRequest and a FileReader() 来避免画布部分，这将涉及不同的跨域限制。