H5下载图片，并保存到手机相册

茶杯茶凉

已于 2024-11-06 16:50:56 修改

阅读量2.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript html5

于 2024-11-06 16:50:20 首次发布

本文链接：https://blog.csdn.net/qq_53513969/article/details/143574122

最近写了一个移动端项目，h5内嵌套移动项目，在手机app中保存图片失败，原因是项目的保存图片是用的a标签下载，在手机上不起作用。所以使用H5的内置Api对图片进行保存。

官网地址：HTML5+ API Reference

代码实现：

export default {
  data() {
    return {};
  },
  methods: {
    // h5+ 保存图片到相册
    plusSaveImg(filename) {
      plus.gallery.save(
        filename,
        () => {
          this.$notify.success({
            title: "友情提示",
            message: "已保存到系统相册",
            position: "bottom-right",
          });
        },
        (e) => {
          console.log(e.message);
        }
      );
    },
    // 下载按钮和功能
    clickImage(imageUrl) {
      this.$nextTick(() => {
          try {
                const downloadTask = plus.downloader.createDownload(
                  imageUrl,
                  {
                    filename: "_downloads/" + "保存图片.png",
                  },
                  (download, status) => {
                    if (status === 200) {
                      let fileSaveUrl = plus.io.convertLocalFileSystemURL(
                        download.filename
                      );
                      this.plusSaveImg(fileSaveUrl);
                    } else {
                      console.log(`file download fail, status code: ${status}`);
                    }
                  }
                );
                downloadTask.start();
              } catch (error) {
                console.log(error);
              }         
      });
    }
  },
};

我这个是h5页面嵌套了移动端的项目，如果是浏览器中下载图片还是要走以前的a标签方式。