vue 图片

vue 图片懒加载

• 1. 安装

     npm install vue-lazyload --save

• 2. 导入

import VueLazyload from "vue-lazyload";

Vue.use(VueLazyload);

• 3. 使用
  • 1. 图片 img 使用

       <img class="item-pic" v-lazy="picUrl"/>

  • 2. 背景图使用

       <div v-lazy:background-image="imgLink"></div>

vue 单个图片下载

1. window.open(imageUrl)

2. js 方法下载

downIamge(imgsrc, name) { // 下载图片地址和图片名
      var image = new Image()
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function() {
        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var url = canvas.toDataURL('image/png') // 得到图片的base64编码数据

        var a = document.createElement('a') // 生成一个a元素
        var event = new MouseEvent('click') // 创建一个单击事件
        a.download = name || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = imgsrc
},

vue 批量图片下载

1. 安装依赖包

npm install jszip --save
npm install file-saver --save

2. js 封装方法

multiDownload() {
  const _this = this
  const zip = new JSZip()
  const cache = {}
  const promises = []
  _this.title = '正在加载压缩文件'

  for (const item of this.selectList) {
    const promise = _this.getImgArrayBuffer(item.ossPath).then(data => {
      // 下载文件, 并存成ArrayBuffer对象(blob)
      zip.file(item.title, data, { binary: true }) // 逐个添加文件
      cache[item.title] = data
    })
    promises.push(promise)
  }

  Promise.all(promises).then(() => {
    zip.generateAsync({ type: 'blob' }).then(content => {
      _this.title = '正在压缩'
      // 生成二进制流
      FileSaver.saveAs(content, '数据包') // 利用file-saver保存文件  自定义文件名
      _this.title = '压缩完成'
    })
  }).catch(res => {
    _this.$message.error('文件压缩失败')
  })
},

// 通过url 转为blob格式的数据
getImgArrayBuffer(url) {
  return new Promise((resolve, reject) => {
    // 通过请求获取文件blob格式
    const xmlhttp = new XMLHttpRequest()
    xmlhttp.open('GET', url, true)
    xmlhttp.responseType = 'blob'
    xmlhttp.onload = function() {
      if (this.status == 200) {
        resolve(this.response)
      } else {
        reject(this.status)
      }
    }
    xmlhttp.send()
  })
}

Vue 保存 html 页面为图片到手机 html2canvas

• 文档地址：http://html2canvas.hertzen.com/ (opens new window)

• 安装 npm install html2canvas --save

• 导入 import html2canvas from 'html2canvas';

• 注意点

  1. 如果图片不是本地图片而且 http 这种需要设置跨域参数（base64 也可以）

• 使用

> 分享页面
shareImg(item) {
      getInterfaceById({
        id: item.id,
      }).then((res) => {
        if (res.data) {
          this.shareData = res.data;
          setTimeout(() => {
            this.$refs.shareImg.saveImg();
          }, 100);
        }
      });
    },

> ShareImg.vue
 watch: {
    "shareData.imageUrl": {
      handler: async function () {
        if (this.shareData.imageUrl) {
          this.thumbnailUrl = await this.getBase64(this.shareData.imageUrl); // http图片转成base64
        }
      },
      immediate: true,
    },
  },

> ShareImg.vue
   // 保存图片到相册
    saveImg() {
      html2canvas(document.querySelector("#captureId"), {
        useCORS: true, // 解决跨域问题
        }).then(canvas => {
        const saveUrl = canvas.toDataURL("image/png");
        console.log("my console saveUrl : ", saveUrl);
        const aLink = document.createElement("a");
        const blob = this.base64ToBlob(saveUrl);
        const evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);
        aLink.download = "授权.jpg";
        aLink.href = URL.createObjectURL(blob);
        aLink.click();
      });
    },
    // 这里把图片base64转blob
    base64ToBlob(base64) {
      var base64Arr = base64.split(",");
      var imgtype = "";
      var base64String = "";
      if (base64Arr.length > 1) {
        //如果是图片base64，去掉头信息
        base64String = base64Arr[1];
        imgtype = base64Arr[0].substring(
          base64Arr[0].indexOf(":") + 1,
          base64Arr[0].indexOf(";")
        );
      }
      // 将base64解码
      var bytes = atob(base64String);
      //var bytes = base64;
      var bytesCode = new ArrayBuffer(bytes.length);
      // 转换为类型化数组
      var byteArray = new Uint8Array(bytesCode);
      // 将base64转换为ascii码
      for (var i = 0; i < bytes.length; i++) {
        byteArray[i] = bytes.charCodeAt(i);
      }
      // 生成Blob对象（文件对象）
      return new Blob([bytesCode], { type: imgtype });
    },
    /**
     * @description: 图片转base64
     * @param {String} url 需要转换的图片原链接（http://....jpg）
     * @param {String} outputFormat 转换出来的图片的类型（canvas支持jpg/png格式）
     * @return: 返回图片对应的base64编码
     */
    getBase64(url, outputFormat = "image/png") {
      return new Promise(function (resolve) {
        let canvas = document.createElement("CANVAS"),
          ctx = canvas.getContext("2d"),
          img = new Image();

        img.crossOrigin = "Anonymous"; // 重点！设置image对象可跨域请求
        img.onload = function () {
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img, 0, 0);
          let dataURL = canvas.toDataURL(outputFormat);
          canvas = null;
          resolve(dataURL);
        };
        img.src = url;
      });
    },

• 2. 绘制出来是空白区域（不可见内容不可绘制）

有很多时候，我们所要绘制的内容是不能展示出来的，需求是需要直接导出，不需要让用户看到绘制的画布以及内容

这时候 一般做的处理 将所需要描述的内容区隐藏起来，但是一旦隐藏以后，就会发现，绘制出来时是一片空白，这是由于不可见内容不可绘制

什么情况下，是不能绘制的不可见内容：

• 1.display:none

• 2.opacity:0

但是由于需要隐藏 该怎么弄呢 解决方案 ：

• 1.将需要绘制的 div fixed 定位，注意要定位在 top:0, left:0,保证内容区能在可是区域内容，

• 2.然后利用 z-index 来隐藏，这样需要上层有一个遮罩层，需要带背景的层来遮罩住下面的内容

我用的 z-index

• 参考链接： https://www.cnblogs.com/GoTing/p/12343482.html (opens new window)