精华内容
下载资源
问答
我要提问

  • cordova vue app 长按保存图片

     2020-10-16 16:11:00
    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页面监听 添加保存图片的组件 实现长按保存 之前卡在 未添加权限 就去保存 一直失败 例外 图片过大时 保存会慢  可以优化下
    收起
    展开全文
    canvas cordova android

  • 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>
    收起
    展开全文
    javascript jquery es6 html5

  • vue webapp 长按保存图片到相册

     2020-06-24 11:40:00
    <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)
})
    


    如上长按保存图片完成。
    收起
    展开全文
    touch

  • H5页面vue让网页长按保存为图片

     千次阅读 2019-02-24 11:09:43
    1.图片长按可以弹出是否保存为图片 2.想要让网页转为图片，使用html2Canvas 3.想要让网页长按可以弹出为是否保存为图片，就让图片覆盖在整个网页的最上方 4.想要让网页里的二维码，一起生成到图片中，二维码的... 
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    vue h5页面长按保存为图片
    
                                    
                                2020-03-03 15:36:04
                            
    
                            
    
                                
    
                                    npm install html2canvas  -d  <template>  <div class="index">  <div id="captureId" class="capture" v-show="firstFlag">  <ul>  <li>itemi</li> ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    webapp长按保存图片到本地（vue）
    
                                    
                                2020-03-03 15:12:31
                            
    
                            
    
                                
    
                                    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页面使用mint-ui html2canvas 手机电脑点击保存 手动长按保存图片
    
                                    
                                2020-06-11 18:43:55
                            
    
                            
    
                                
    
                                    初始化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 ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        js   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    vue在移动端怎么动态生成二维码并实现长按保存图片?
    
                                    
                                    
                                            千次阅读
                                    
                                2019-06-17 03:41:11
                            
    
                            
    
                                
    
                                    最近在做一个移动端的项目，里边有一个需求是生成链接并且同时把链接转换成二维码的需求，效果图如下：涉及到隐私，打个码因为用的是vue框架，而且是第一次做这中需求的东西，于是果断百度了一波，出来了一堆 什么...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    html网页生成图片，长按保存
    
                                    
                                2019-12-25 11:11:15
                            
    
                            
    
                                
    
                                    html网页上有多张图片，点击长按的话只能保存被按的那张，需要将整个html生成一张图片，这样保存的时候就是整个网页了。 使用html2canvas.js，vue.js  <div class="generatePicture">     &...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    49
            

            

                精华内容
                    19
            

        

        

            
热门标签

            
        


        


        

            关键字：
vue长按保存图片 

        



                

                    
                    vue
                    订阅