-
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>
-
vue H5 长按图片保存分享
2021-10-19 09:40:22在移动h5开发中，经常会遇到需要长按图片可以保存的本地的需求。 在标签中写入触摸事件 <div class="codeBox" @touchstart="touchStart()" @touchend="touchEnd()"></div> 然后在methods里面定义方法...展开全文h5端长按图片分享功能
在移动h5开发中，经常会遇到需要长按图片可以保存的本地的需求。在标签中写入触摸事件
<div class="codeBox" @touchstart="touchStart()" @touchend="touchEnd()"></div>然后在methods里面定义方法
touchEnd(){ //手指离开 clearTimeout(this.Loop); }, touchStart(){ //手指触摸 clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器 this.Loop = setTimeout(() => { // console.log(1222) this.downImg() },1000) }, // 下载 downImg() { if(!window.plus) return; plus.gallery.save(this.imgUrl, function () { console.log('保存成功'); },function(){ console.log('保存失败'); }); }在页面中长按之后的效果
-
webapp长按保存图片到本地（vue）
2019-11-14 11:01:43html js(methods) ... alert('保存成功!... alert('保存失败，请重试!'); }); }, js(data) data() { return { imgUrl: "", longClick: 0, timeOutEvent: 0 }; }, -
html微信长按保存图片vue,vue微信ios长按图片导致大面积被选择bug及其修复方案...
2021-07-10 07:55:45最近又手撕了一个难搞的bug，问题是这样的：在ios的微信上(vue单页面项目)，用户长按一张图片(微信上长按下载图片到本地)，然后点击其他地方，点着点着就发现一大片区域被选中了，惨不忍睹，部分截图如下：这个问题... -
vue h5页面长按保存为图片
2019-10-29 17:11:08npm install html2canvas -d <li>itemi <li>itemi <li>itemi <li>itemi <li>itemi <li>itemi ...注意：若保存的DOM元素中包含图片img，img的src必须是静态图片，网络图片无法保存 -
H5长按保存图片
2019-08-08 15:47:36说到长按保存图片，我们一定能想到touch事件，那么此时我们就需要用到touchstart、touchend、touchmove。 下面我分别使用Vue和MUI进行代码解析 Vue: 首先我们需要给标签绑定这三个事件 <img class="saveImg... -
微信长按保存图片
2018-03-02 16:58:50背景图添加图片，图片会随着页面变化变形，所以图片定位的时候不用背景图。如果图片要保存的话用背景图。...$.data()和attr()用法一样，可以设置和获取... 图片能写出背景图就写背景图，因为微信长按保存图片会有问题... -
uniapp h5 页面 解决 ios 长按无法保存图片问题（安卓支持此功能）--实现移动端长按保存图片
2020-11-06 20:40:16H5 页面 移动端实现长按保存图片以及图片显示异常问题 uniapp 中的 一些小坑： image 标签中的 src 属性不支持 写 @ uniapp 写 h5 页面 ， image 标签 在 ios 端 不支持 长按 保存图片，使用canvas 标签包裹img标签... -
vue系列：vue长按二维码无法识别
2020-03-19 17:28:56只出现保存图片按钮。 解决办法 用 a 标签的办法来跳转 setTimeout(() => { window.location.replace('/services/share') }, 100) 如果需要页面通信就惨了，只能用 localstorage 了。。 虽然可以解决，但是这个... -
H5页面vue让网页长按保存为图片
2019-02-24 11:09:431.图片长按可以弹出是否保存为图片 2.想要让网页转为图片，使用html2Canvas 3.想要让网页长按可以弹出为是否保存为图片，就让图片覆盖在整个网页的最上方 4.想要让网页里的二维码，一起生成到图片中，二维码的... -
vue 二维码长按保存和复制内容
2019-09-23 18:04:05二维码用了 qrcode.vue npm install qrcode.vue --save 复制内容用了 vue-clipboard2 npm install vue-clipboard2 --save 二维码相关： <div class="qrcode"> ... -
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在移动端怎么动态生成二维码并实现长按保存图片?
2019-06-17 03:41:11最近在做一个移动端的项目，里边有一个需求是生成链接并且同时把链接转换成二维码的需求，效果图如下：涉及到隐私，打个码因为用的是vue框架，而且是第一次做这中需求的东西，于是果断百度了一波，出来了一堆 什么... -
h5写长按保存图片到手机相册
2019-12-19 15:06:03h5写长按保存图片到手机相册 话不多说直接上代码 首先引入html2canvas import html2canvas from ‘html2canvas’ <div> //模板部分 <div class="contents"> <img src="./img/psb.jpg" alt="" ... -
uni-app的app端实现长按保存图片，保存二维码
2021-06-24 10:43:33uni-app的app端实现长按保存图片，保存二维码 1.先给图片加一个长按事件：@longtab <!-- @longtab长按事件 --> <image @longtap="bankImg" class="bankImgg" :show-menu-by-longpress="true" src="路径" ...
收藏数
751
精华内容
300
vue
订阅