-
cordova vue app 长按保存图片
2020-10-16 16:11:00cordova 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>
-
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) })
如上长按保存图片完成。
-
H5页面vue让网页长按保存为图片
2019-02-24 11:09:431.图片长按可以弹出是否保存为图片 2.想要让网页转为图片,使用html2Canvas 3.想要让网页长按可以弹出为是否保存为图片,就让图片覆盖在整个网页的最上方 4.想要让网页里的二维码,一起生成到图片中,二维码的... -
vue h5页面长按保存为图片
2020-03-03 15:36:04npm 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:31html “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:26vue H5 实现长按图片实现图片保存 实现图片保存时非常常见的功能,直接上代码 由于我的项目用的是mint-ui,需要弹框出现img <mt-popup v-model="popupVisible" popup-transition="popup-fade" > <img ... -
vue在移动端怎么动态生成二维码并实现长按保存图片?
2019-06-17 03:41:11最近在做一个移动端的项目,里边有一个需求是生成链接并且同时把链接转换成二维码的需求,效果图如下:涉及到隐私,打个码因为用的是vue框架,而且是第一次做这中需求的东西,于是果断百度了一波,出来了一堆 什么... -
html网页生成图片,长按保存
2019-12-25 11:11:15html网页上有多张图片,点击长按的话只能保存被按的那张,需要将整个html生成一张图片,这样保存的时候就是整个网页了。 使用html2canvas.js,vue.js <div class="generatePicture"> &...
收藏数
49
精华内容
19
-
通向数字化专业知识体系之路.pdf
-
VMware vSphere ESXi 7 精讲/VCSA/VSAN
-
LVS + Keepalived 实现 MySQL 负载均衡与高可用
-
SpringBoot热部署
-
Flutter自定义TabBar的Indicator.zip
-
C/C++反汇编解密
-
MySQL 管理利器 mysql-utilities
-
《合同法》期末复习训练题(含答案).pdf
-
c-switch结构、年月日关系、判断闰年
-
Netty ServerBootStrap启动流程图解
-
Softwinproj3.zip
-
java 商城源码 Spring Cloud Spring Boot2 Mybatis Uniapp oauth2 前后端分离 APP 小程序 H5商城 电子商务 商城源码 分布式商城 微服务商城源码
-
基于Qt的LibVLC开发教程
-
流媒体相关技术
-
读书笔记(第三章 数据存储与检索 索引部分)
-
《电力电子技术》 期末试题(含答案).pdf
-
centos7的使用(长期更新中)
-
2021-03-02
-
零基础极简以太坊智能合约开发环境搭建并开发部署
-
华电专属ppt模板.zip