vue 保存图片到本地 使用hubilder打包的app

　参考了好多大佬的东西，自己整理下来，方便自己使用

1、在main.js引入mui.js、 mui.css　　

　　import './assets/css/mui.css'  // 要在mui.css的页面底部添加 window.mui = mui，不写打包会出现打包鼠标

　　import mui from './assets/js/mui.js'

　　Vue.prototype.mui = mui

　　import publicMethod from "./publicMethod/public.js";  // 自己写的保存图片的方法

　　Vue.prototype.publicMethod = publicMethod;

　　import "mint-ui/lib/style.css"; // 弹框用户点击图片进行保存　　

　　import MintUI from "mint-ui";

　　Vue.use(MintUI);

　　在babel.config.js中添加   "ignore": ['./src/assets/js/mui.js']

　　在.eslintignore中添加     src/assets/js/mui.js  

 

　2、保存图片的方法  （./publicMethod/public.js）

　　

const publicMethod = {

  //app保存图片

  savePictures () {

    mui.init({

      //初始化

      gestureConfig: {

        tap: true, //默认为true

        doubletap: true, //默认为false

        longtap: true, //默认为false

        swipe: true, //默认为true

        drag: true, //默认为true

        hold: true, //默认为false，不监听

        release: false //默认为false，不监听

      }

    });

    if (typeof plus == 'undefined') {

      return false;

    }

    setTimeout(() => {

      mui('#imgsul').off().on('longtap', '.saveImg', function () {

        //开启弹框

        mui('#picture').popover('toggle');

        var imgurl = this.src;

        mui('.mui-table-view-cell').off().on('tap', '#saveImg', function () {

          var imgDtask = plus.downloader.createDownload(

            imgurl, {

            method: 'GET'

          },

            function (d, status) {

              // alert(d.filename)

              // alert(status)

              if (status == 200) {

                plus.gallery.save(d.filename, function () {

                  //保存到相册

                  plus.io.resolveLocalFileSystemURL(d.filename, function (enpty) {

                    // 关闭弹框

                    mui('#picture').popover('toggle');

                    mui.toast('保存成功');

                  });

                });

              } else {

                mui.toast('保存失败');

              }

            }

          );

          imgDtask.start();

        });

      });

    }, 100);

  }

};

export default publicMethod;

 

3、在页面中进行方法的引入

　　1.页面中引入import { Toast, Indicator, MessageBox } from "mint-ui";

　　2.添加页面元素

　　

　　<div id="picture"

         class="mui-popover mui-popover-action mui-popover-bottom"

         style="z-index: 99999999">

      <ul class="mui-table-view">

        <li class="mui-table-view-cell">

          <a href="javascript:;"

             id="saveImg">保存图片</a>

        </li>

      </ul>

      <ul class="mui-table-view">

        <li class="mui-table-view-cell">

          <a href="#picture"><b>取消</b></a>

        </li>

      </ul>

    </div>

　　3.点击你要保存图片的方法

　saveImg () {

      console.log(this.mui)

      let ua = window.navigator.userAgent.toLowerCase();

      if (ua.match(/MicroMessenger/i) !== 'micromessenger') {

        MessageBox({

          title: '',

          showConfirmButton: false,

          cancelButtonClass: false,

          message: '<p id="imgsul"><img class="saveImg" style="width:100%; height:100%;" src=' + this.info.urlCode + '></p><p>长按保存图片</p>',

        })

        this.publicMethod.savePictures();

      }

    }