Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/zh-CN/docs/Web/HTML/How_to/CORS_enabled_image below:

允许图片和 canvas 跨源使用 …æ–‡æœ¬æ ‡è®°è¯è¨€ï¼‰

以上配置完毕后，服务器就可以跨源获取图片了。现在我们可以开始编写将图片保存在本地存储中的代码了，就像这些图片在你自己域名之下一样。

关键在于在 HTMLImageElement 上设置 crossOrigin 的 crossorigin 属性，这引导浏览器在下载图像数据时使用跨源访问。

以下代码会（例如，在用户点击“下载”按钮时）开始下载：

function startDownload() {
  let imageURL =
    "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
  let imageDescription = "The Mozilla logo";

  downloadedImg = new Image();
  downloadedImg.crossOrigin = "Anonymous";
  downloadedImg.addEventListener("load", imageReceived, false);
  downloadedImg.alt = imageDescription;
  downloadedImg.src = imageURL;
}

在这里，我们使用了“硬编码”的图片网址（imageURL）和相关描述文字（imageDescription），当然这些可以很方便地从任何地方获取。当开始下载图片时，我们使用 Image() 构造器创建新的 HTMLImageElement 对象，将图片的 crossOrigin 属性设置为 "Anonymous"（即允许对未经过验证的图像进行跨源下载）。为图片添加 load 事件的监听来判断图片数据是否已接收。我们为图片添加了替代性文字，当 <canvas> 不支持 alt 属性时，该值可以用于设置 aria-label 或 canvas 的内部内容。

最后，将图片的 src 属性设置为图片的 URL 以触发图片下载。

在 imageReceived() 方法中来处理新下载的图片：

function imageReceived() {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");

  canvas.width = downloadedImg.width;
  canvas.height = downloadedImg.height;
  canvas.innerText = downloadedImg.alt;

  context.drawImage(downloadedImg, 0, 0);
  imageBox.appendChild(canvas);

  try {
    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
  } catch (err) {
    console.error(`Error: ${err}`);
  }
}

在 HTMLImageElement 调用 imageReceived() 来处理 "load" 事件以接收下载图片。一旦下载完成全部有效的数据即可触发该事件。首先我们会创建用于转换图片到数据 URL 的 <canvas> 元素，然后在变量 context 中获取 canvas 的 2D 绘画上下文（CanvasRenderingContext2D）。

调整画布大小以匹配接收到的图像，内部文字将设置为图片的描述，然后使用 drawImage() 将图像绘制到画布中。画布之后被插入到文档中显示。

现在是时候本地存储图片了。我们使用 Web Storage API 的本地存储机制来将图片实际存储到本地，该机制可通过全局 localStorage 进行访问。canvas 的 toDataURL() 方法用于将图像转换为 data:// URL 形式的 PNG 格式图片，之后使用 setItem() 存储到本地。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4