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

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

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

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

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

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

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

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

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