精华内容
下载资源
问答
  • cordova vue监听长按事件 ...长按保存图片 主要在vue进行监听 用插件进行保存 一、添加插件cordova-plugin-canvas2image cordova plugin add cordova-plugin-canvas2image 二、添加权限 代码如下

    cordova vue监听长按事件


    前言

    长按保存图片 主要在vue进行监听 用插件进行保存


    一、添加插件cordova-plugin-canvas2image

    cordova plugin add cordova-plugin-canvas2image

    二、添加权限

    代码如下

                <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
                <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
                <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
    

    三、在app.vue页面中添加长按监听图片事件

    代码如下:

          let timer = 0
          document.ontouchstart = (e) => {
            timer = setTimeout(() => {
              console.log('LongPress')
              if (e.target.nodeName === 'IMG') {
                console.log(e)
                this.$refs.imgSave.openFuc(true, e.target.currentSrc)
              }
              e.preventDefault()
            }, 800)
          }
          document.ontouchmove = (e) => {
            console.log('touchmove')
            clearTimeout(timer)
            timer = 0
          }
          document.ontouchend = (e) => {
            console.log('touchend')
            clearTimeout(timer)
            // if (e.target.nodeName === 'IMG') {
            //   return false
            // }
          }
    

    添加保存图片组件:xxx.vue

    在app.vue页面中引入该组件 具体dom代码不做一一列出了,
    页面中添加canvas

    <canvas id="myCanvas" style="position: absolute; z-index: -999; visibility: hidden"></canvas>
    

    具体说下js逻辑
    保存时再确认下 是否添加好权限
    代码如下:

       const permissions = cordova.plugins.permissions
          permissions.checkPermission(permissions.WRITE_EXTERNAL_STORAGE, (s) => {
            if (!s.hasPermission) {
              permissions.requestPermission(permissions.WRITE_EXTERNAL_STORAGE, (s) => {
                if (s.hasPermission) {
                  this.saveToPhone()
                } else {
                  console.log('申请失败')
                }
              }, function (error) {
                console.log(error)
              })
            } else {
              this.saveToPhone()
            }
          }, function (error) {
            console.log(error)
          })
    

    接下来添加保存方法

      saveToPhone () {
          // eslint-disable-next-line no-unused-vars
          let canvas, context
          // eslint-disable-next-line prefer-const
          canvas = document.getElementById('myCanvas')
          const img = new Image()
          img.src = this.imgSrc
          img.onload = () => {
            canvas.width = img.width
            canvas.height = img.height
            context = canvas.getContext('2d')
            // eslint-disable-next-line no-undef
            context.drawImage(img, 0, 0)
            this.closeFuc()
            try {
              window.canvas2ImagePlugin.saveImageDataToLibrary(
                (msg) => {
                  this.$toast.success({
                    className: 'toast-default-size',
                    message: '保存成功'
                  })
                  // eslint-disable-next-line handle-callback-err
                }, (err) => {
                  console.log(err)
                  this.$toast.fail(
                    {
                      className: 'toast-default-size',
                      message: '保存失败!'
                    })
                },
                document.getElementById('myCanvas')
              )
            } catch (e) {
              console.log(e.message)
            }
          }
        }
    

    总结

    主要通过vue页面监听 添加保存图片的组件 实现长按保存 之前卡在 未添加权限 就去保存 一直失败 例外 图片过大时 保存会慢 可以优化下

    展开全文
  • vue 长按图片保存分享

    2020-12-04 13:46:29
    长按图片保存分享</title> <meta name="viewport" content="640, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"> <script src=...
    <html>
    <head>
    <title>长按图片保存分享</title>
    <meta name="viewport" content="640, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    </head>
    <body>
    <style>
    *{
    	margin:0;
    	padding:0;
    }
    body,
    html {
    	width: 100%;
    	height: 100%;
    	padding-bottom:30px;
    }
    
    #imgBox {
    	width: 100%;
    	height: 100%;
    }
    #imgBox p {
    	font-size:12px;
    	line-height:30px;
    	color:#aaa;
    	background-color:#fff;
    	text-align:center;
    	margin-bottom:10px;
    }
    img {
    	width: 80%;
    	display: block;
    	margin:0 auto;
    	box-shadow: 0 0 30px rgba(0,0,0,.2);
    }
    #btn2{display:none;margin-bottom:10px;}
    </style>
    <div id="imgBox">
    	<p>长按图片保存到系统相册中然后分享</p>
    	<img :src='imgSrc' v-if="imgSrc" />
    </div>
    <script>
    // js主要结构
    new Vue({
        el:'#imgBox',
        data:{
            userName: '千里草',//用户称呢
            imgSrc: '',//合成最终图片
            qrCode: 'qr.png'//二维码
        },
    	mounted(){
    		this.drawCanvasBgImg();
    	},
        methods: {  
            // 获取页面dpr和宽度
    
            getWindowInfo() {
                var windowInfo = {};
                windowInfo.dpr = window.devicePixelRatio;
                if (window.innerWidth) {
                    windowInfo.width = window.innerWidth;
                }
                else {
                    windowInfo.width = document.body.clientWidth;
                }
                return windowInfo;
            },
            //拿到数据后开始画背景大图 想法很简单就是把图片画到canvas中然后在画布上再画头像文字让后转成img
    		drawCanvasBgImg () {	
    			var vm = this;
    			var canvas = document.createElement("canvas");
    			var ctx = canvas.getContext("2d");
    			var clientWidth = this.getWindowInfo().width;  //获取屏幕宽度用于canvas宽度自适应移动端屏幕
    			var dpr = this.getWindowInfo().dpr;
    			
    			ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
    			canvas.width = 640;//dpr * clientWidth;  //由于手机屏幕时retina屏,都会多倍渲染,用dpr来动态设置画布宽高,避免图片模糊			
    			canvas.height = 1138;//dpr * clientWidth * 609 / 375;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
    			var img = new Image();
    			img.crossOrigin = '';//死坑的图片跨域 (img.crossOrigin = "Anonymous"这种写法还是不能显示base64格式图片)
    			img.src = "bg.jpg";//背景图
    			img.onload = function () {
    				ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    				vm.drawCanvasqrImg(canvas, ctx, dpr);
    			}
    		},
    		// 绘制二维码
    		drawCanvasqrImg: function (canvas, ctx, dpr) {			
    			var vm = this;
    			var start = 182;
    			var imgX = start;//图片X开始坐标
    			var imgY = 495;//图片Y开始坐标
    			var imgWidth = 275;
    			var img = new Image();
    			img.crossOrigin = '';
    			img.src = this.qrCode;
    			img.onload = function () {
    				ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth);
    				ctx.restore(); // 还原状态
    				vm.canvasFillPin(canvas, ctx, dpr);
    			}
    		},
    		canvasFillPin (canvas, ctx, dpr) {
    			var vm = this;
    			var fontSizeThis = 30 + 'px' + ' Arial';
    			var userNameY = 830;//用户名Y轴坐标
    			ctx.font = fontSizeThis;
    			// 需要用户名是写入用户名
    			if (this.userName) {
    				ctx.fillStyle = "white"; 
    				ctx.textAlign = 'left';
    				var w = ctx.measureText(this.userName).width;
    				ctx.fillText(this.userName,(canvas.width-w)/2, userNameY);
    				
    				ctx.restore(); // 还原状态
    				this.convertCanvasToImage(canvas);
    			}		
    		},
    		
            convertCanvasToImage (canvas) {
                this.imgSrc = canvas.toDataURL("image/jpeg");//png有毒在安卓机下识别二维码无法跳转
                this.$Spin.hide();
            }
        }
    })
    </script>
    </body>
    </html>
    
    展开全文
  • <template> <div class="container"> <div class="white-box"> <div class="erweima"> <img :src="user_qrcode" alt="" @touchstart="start"> <p>商家收款码<...
    <template>
      <div class="container">
    
          <div class="white-box">
            <div class="erweima">
                <img :src="user_qrcode" alt="" @touchstart="start">
                <p>商家收款码</p>
            </div>
          </div>
      </div>
    </template>
    
    <script>
    export default {
        name: 'payCode',
        data(){
            return{
    
                longClick: 0,
                timeOutEvent: 0,
                user_qrcode: ""
            }
        },
        created:function(){
            
        },
        methods:{ 
    
            start() {
                var that = this;
                this.longClick = 0;
                this.timeOutEvent = setTimeout(function() {
                    that.longClick = 1;
                    that.downImg()
                }, 500);
            },
            downImg(){
                let _this = this;
                if(!window.plus) return;
                plus.gallery.save(_this.user_qrcode, function () {
                    _this.$public.msg('保存成功!');   //_this.user_qrcode 是服务器链接,必须是图片格式
                },function(){
                    _this.$public.msg('保存失败,请重试!');
                });
            },
    
        }
    }
    </script>
    
    
    展开全文
  • H5长按保存图片

    千次阅读 2019-08-08 15:47:36
    说到长按保存图片,我们一定能想到touch事件,那么此时我们就需要用到touchstart、touchend、touchmove。 下面我分别使用Vue和MUI进行代码解析 Vue: 首先我们需要给标签绑定这三个事件 <img class="saveImg...

    说到长按保存图片,我们一定能想到touch事件,那么此时我们就需要用到touchstart、touchend、touchmove。

    下面我分别使用Vue和MUI进行代码解析

    Vue:

    首先我们需要给标签绑定这三个事件

    <img class="saveImg" src="图片途径" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">

    其次是我们的定时器,我们需要控制长按的时间,一般不会超过一秒钟

    data(){
        return{
            time:""    
        }
    }
    touchstart(e){
        this.time = setTimeout(() => {
            var imgUrl = e.target.src
            //此处是调用的APP得方法来保存图片,正常的H5项目是无法保存图片,除非我们项目创建时是移动APP项目
            saveWxTimeLine1(imgUrl)
        },1000)
    }

    结束及移除长按事件

    touchend(){
        clearTimeout(this.time)
    },
    touchmove(){
        clearTimeout(this.time)
    }

    MUI:

    <img class="saveImg" src="图片途径">

    首先我们需要在mui.init()初始化时打开MUI的tap属性。

    mui.init({
       gestureConfig: {
          tap: true, //默认为true
    	  doubletap: true, //默认为false
    	  longtap: true, //默认为false,为true时是开启长按保存图片功能
    	  swipe: true, //默认为true
    	  drag: true, //默认为true
    	  hold:true,//默认为false,不监听
    	  release:false//默认为false,不监听
       }
    })

    此时我们需要监听dom是否发起了longtap长按请求:

    $(".saveImg").on("longtap",function(){
        var imgUrl = $(this).attr('src')
        //调用APP保存图片方法
        saveWxTimeline1(imgUrl)
    })

    如上长按保存图片完成。

    展开全文
  • H5页面vue让网页长按保存图片

    千次阅读 2019-02-24 11:09:43
    1.图片长按可以弹出是否保存图片 2.想要让网页转为图片,使用html2Canvas 3.想要让网页长按可以弹出为是否保存图片,就让图片覆盖在整个网页的最上方 4.想要让网页里的二维码,一起生成到图片中,二维码的...
  • npm install html2canvas -d <template> <div class="index"> <div id="captureId" class="capture" v-show="firstFlag"> <ul> <li>itemi</li> ...
  • html “start” class=“ppimg” :src=“imgUrl” alt=""> js data ( ) { return { imgUrl : "" , longClick : 0 ...'保存成功!...'保存失败,请重试!' ) ; } ) ; } ,
  • vue系列:vue长按二维码无法识别

    千次阅读 2020-03-19 17:28:56
    只出现保存图片按钮。 解决办法 用 a 标签的办法来跳转 setTimeout(() => { window.location.replace('/services/share') }, 100) 如果需要页面通信就惨了,只能用 localstorage 了。。 虽然可以解决,但是这个...
  • 初始化VUE工程 安装依赖 npm install --save html2canvasforios13 mint-ui main.js 引入 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in ...
  • vue H5 实现长按图片实现图片保存

    千次阅读 2020-04-30 14:39:26
    vue H5 实现长按图片实现图片保存 实现图片保存时非常常见的功能,直接上代码 由于我的项目用的是mint-ui,需要弹框出现img <mt-popup v-model="popupVisible" popup-transition="popup-fade" > <img ...
  • 最近在做一个移动端的项目,里边有一个需求是生成链接并且同时把链接转换成二维码的需求,效果图如下:涉及到隐私,打个码因为用的是vue框架,而且是第一次做这中需求的东西,于是果断百度了一波,出来了一堆 什么...
  • html网页上有多张图片,点击长按的话只能保存被按的那张,需要将整个html生成一张图片,这样保存的时候就是整个网页了。 使用html2canvas.js,vue.js  <div class="generatePicture">     &...

空空如也

空空如也

1 2 3
收藏数 49
精华内容 19
关键字:

vue长按保存图片

vue 订阅