美文网首页Vue
Vue<移动端截屏保存当前图片>

Vue<移动端截屏保存当前图片>

作者: 誰在花里胡哨 | 来源:发表于2019-05-15 17:32 被阅读298次

功能实现看图:

1.点击保存本地

IMG_20190515_162920.jpg

2.长按选择保存

IMG_20190515_162834.jpg

3.保存

Screenshot_2019-05-15-16-26-26-632_com.tencent.mm.png

首先:

npm install --s html2canvas

代码如下:

<template>
<div>
<!-- 此处是要截取的图片 -->
   <div id="imgDownload" ref="QRcodeSrcImg"  @click="maskShow=false">
        <div class="box">
          <canvas id="QRCode"></canvas>
          <p class="text">扫描二维码</p>
        </div>
      </div>
<!-- 此处是储存截取后的图片 -->
    <div class="photoShow" v-if="photoShow">
         <div id="photo">
            <p>长按图片保存</p>
            <img :src="photoUrl" id="img" alt="">
           <!-- <span>长按图片保存和分享</span> -->
         </div>
     </div>
<!-- 此处是保存到本地的方法 -->
      <div class="bottom" @click="imgDownload()">
        <div style="text-align: center;">
          <p style="font-size:1.4rem;margin-top:10px;color:#a5a4a4;;">保存到本地</p>
        </div>
      </div>

</div>
</template>
<script>
import html2canvas from "html2canvas"
export default {
data(){
   return{
       photoUrl:"",
      photoShow:false
    }
  },
methods: {
     // 图片保存方法
    imgDownload() {
      let _this = this;
      _this.photoShow = true;
      // 声明一个画布元素,存储需下载图片范围
      let canvas = document.createElement("canvas");
      // 获取需下载范围元素
      let img = this.$refs["QRcodeSrcImg"];
      // 图片高度
      var w = parseInt(window.getComputedStyle(img).width);
      // 图片宽度
      var h = parseInt(window.getComputedStyle(img).height);
      // 声明画布宽高
      canvas.width = w;
      canvas.height = h;
      canvas.style.width = w + "px";
      canvas.style.height = h + "px";
      // console.log(w, h);
      // let context = canvas.getContext("2d");
      // context.scale(2, 2);
      // 利用 html2canvas 下载 canvas
      html2canvas(img, { canvas: canvas }).then(function(canvas) {
             _this.photoUrl = canvas.toDataURL()
      });
    }
  }
}
</script>

相关文章

  • Vue<移动端截屏保存当前图片>

    功能实现看图: 1.点击保存本地 2.长按选择保存 3.保存 首先: npm install --s html2c...

  • iOS下实现截屏并保存

    如何在代码中实现 截屏并保存至系统相册写在前面,系统截屏并没有想象中那么难 1.保存当前界面的图片(截图)这个函数...

  • iOS UIWebView 截图

    需求:将完整webview截下来,保存图片。 思路: 1、当webview内容高度小于当前屏幕高度,正常截屏即可;...

  • ios MobileVLCKit的截屏和录屏功能

    第一、截屏功能 项目需求,点击截屏按钮,对当前直播页面截屏并且保存到相册。 MobileVLCKit这个库本身有提...

  • 安卓截图笔记

    Android截屏 Android截屏的原理:获取具体需要截屏的区域的Bitmap,然后绘制在画布上,保存为图片后...

  • Android截屏方案

    Android截屏 Android截屏的原理:获取具体需要截屏的区域的Bitmap,然后绘制在画布上,保存为图片后...

  • Android:将一个Activity、某块布局转换成图片

    使用截屏,然后保存图片 如果要保存的布局正好是撑满这个屏幕,那可以使用截屏的方式来保存图片; 如果只是屏幕的某一个...

  • iOS 截屏&长截屏

    截屏在 iOS 开发中经常用到,本篇文章讲的是监听用户截屏操作,并且获取截屏图片,如果当前是UIScrollVie...

  • 前端日常(项目里踩过的坑总结)

    页面截屏保存图片 截屏工具:html2canvas 转图片与保存,一开始用手动封装的 base64Img2Blob...

  • 浅析APP截屏唤起功能设计

    谈到APP截屏,人们的印象中就是截屏后系统会自动将截屏的图片会保存到手机相册里面,APP自己不做处理。事实上,很多...

网友评论

    本文标题:Vue<移动端截屏保存当前图片>

    本文链接:https://www.haomeiwen.com/subject/tpfmaqtx.html