哥们姐们，今天聊聊我以前在Vue项目里怎么把图片往手机相册里存的。这东西，看着简单，但刚开始摸索的时候，也把我搞得一头雾水。就是喜欢把遇到的坑和踩出来的路都记下来，想着以后自己能翻翻，也能跟大伙儿分享分享。
第一次上手：直接下载那点事儿
我记得那会儿，我们有个项目，里头有些生成的二维码，用户扫完想保存下来。我想着这不就是个图片嘛直接搞个下载按钮不就行了？
- 想法很丰满，现实很骨感。我一开始就是想直接把图片地址一丢，告诉浏览器“你下载”。结果？手机上点一下，它要么给你新开个页面显示图片，要么就是问你“你要不要打开这个图片”，根本没直接进相册的选项。这可不行，用户要的是直接保存到相册里去。
- 摸索开始。我寻思着，网页上的下载，是不是得搞点“名堂”？后来我才知道，要让浏览器“真心实意”地去下载一个东西，得给它一个“下载指令”。在JavaScript里面，咱们可以模拟一个点击事件，或者直接让浏览器去执行下载。
- 我的初步实践：
小编温馨提醒：本站只提供游戏介绍，下载游戏请前往89游戏主站，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
我搞了一个隐形的下载触发器，就是那种不显示在页面上，但代码里能控制的玩意儿。当我需要下载图片时，就用JS创建一个临时的这个触发器，把图片的地址塞进去，再给它一个“download”的属性，告诉浏览器：“这个东西别打开，直接给我下载下来！”然后，我再用JS代码模拟点击这个触发器。这样一来，它就会弹出一个保存对话框，用户就能选择保存了。
这个方法对那种直接能访问到的图片链接，比如我们服务器上存好的二维码图，效果是真不错。手机浏览器一般会问你，是保存到文件还是相册。大多数用户都会很自然地选择相册，这也算是曲线救国成功了一半。
进阶玩法：遇到动态图和处理过的图怎么办？
好景不长，项目需求又来了。这回不是直接的图片链接了，而是用户自己在页面上编辑了一张图，或者我们通过代码合成了一张图，这玩意儿是实时的，没有一个固定的链接可以直接下载。
- Canvas出手！我想了想，这不就是咱们前端最擅长的画图板——Canvas吗？既然图片是在前端生成的，那它肯定是在Canvas上画出来的。Canvas有个特别好的功能，就是能把当前它上面的内容，直接转成图片数据。
- 我的尝试：
我先是把所有动态生成的内容，都想办法画到了一个隐藏的Canvas上。这个Canvas在页面上是看不到的，但我能用JS操作它。等所有内容都画好了，我就调用Canvas的`toDataURL()`方法，这玩意儿能把Canvas上的图像变成一串长长的图片数据字符串，带前缀的那种。
拿到这个长串图片数据后，我就又用上了之前那个“模拟下载”的招数。把这个长串数据当成图片链接，塞给那个临时的下载触发器，然后模拟点击。这招真灵！哪怕是前端临时生成的图片，也能顺利地被手机识别成图片文件，然后提供保存到相册的选项。
- 遇到的坑：用`toDataURL()`的时候，如果Canvas上画了别的地方来的图片（比如跨域的图片），那这个方法就会报错，或者直接导出个空白图。后来我知道，这是浏览器的安全策略。我的解决办法就是，所有需要导出的图片，要么是同源的，要么就是我在服务端做个代理转发一下，把图片变成同源的再画上去。
终极方案：Blob大法什么图都能下！
上面两种方法已经解决了我大部分问题了。但是，有些时候，我拿到的图片并不是一个直接的URL，也不是Canvas能画出来的。比如，我通过网络请求拿到了一个图片文件流，或者后端传过来的数据就是个二进制的Blob对象。
- Blob是什么鬼？简单来说，Blob就是浏览器提供的一种“二进制大对象”类型，可以用来存各种二进制数据，比如图片、音频、视频文件。拿到一个Blob，就等于你拿到了这个文件的原始数据。
- 我的实践：
当我拿到一个Blob对象的时候，我发现直接用它来下载有点麻烦。浏览器不认识Blob这个东西，它需要一个URL。我需要把这个Blob对象，“变”成一个临时的URL，让浏览器能通过这个URL去访问它。
这时候，`*()`这个方法就登场了。它能把一个Blob对象或者文件对象，转换成一个特殊的URL，这个URL只在当前页面有效，而且指向的就是这个Blob数据。拿到这个临时的URL之后，后面的操作就跟之前下载Canvas图片一样了——塞给那个临时触发器，模拟点击下载。
这个方法有个好处，就是不管你的图片是从哪里来的，只要能变成Blob，我都能给它整下载了。而且这种方式处理大图片也挺靠谱，不会像`toDataURL()`那样一下子把内存占满。
- 记得释放：用`*()`生成的URL是个临时的资源，用完了一定要用`*()`来释放掉，不然时间长了会占用内存，造成内存泄漏。这可是个好习惯，我每次用完都会马上回收。
总结一下这几个方法，都是围绕着一个核心思想：想办法把你要保存的图片变成一个浏览器能识别的“下载资源”，然后触发浏览器自身的下载机制。手机浏览器在下载图片的时候，都会很智能地提供一个保存到相册的选项。只要咱们把下载这个环节搞定，用户保存到手机相册这事儿，基本就水到渠成了。
从一开始的瞎摸索，到后来的有章法，这过程也挺有意思的。再让我来处理图片保存到手机相册的需求，我心里就有谱多了。希望能帮到也还在琢磨这事儿的你们！
