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

最新推荐文章于 2024-08-23 11:36:02 发布
最新推荐文章于 2024-08-23 11:36:02 发布
阅读量5.5k 收藏 5
点赞数
分类专栏： # L4：Vue Part1：Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/diaoweixiao/article/details/87901092
版权

思路如下：
1.图片长按可以弹出是否保存为图片
2.想要让网页转为图片，使用html2Canvas 详细实现方式点这儿
3.想要让网页长按可以弹出为是否保存为图片，就让图片覆盖在整个网页的最上方，并且设置该图片的的透明度为0.01
4.想要让网页里的二维码，一起生成到图片中，二维码的生成请使用QRCode 详细实现方式点这儿
5.想要让网页显示的内容和最后生成的图片不一致，就把内容copy两次，显示的内容放在下方，保存为图片的内容放在上方，上方的内容隐藏
6.网页没有滚动条，一页可以显示没问题；如果网页有滚动条想要让图片内容不被压小，就要设置canvas的宽高，宽度可以固定，高度设置成获取网页内容的高度

掌握思路，实现代码只是分分钟的事，over

朝阳若蓝
关注
专栏目录
微信公众号 - 禁用 H5 网页长按图片时弹出的菜单（转发给朋友 / 保存到手机 / 收藏 / 搜一搜），苹果安卓系统都可暴力 100% 完美禁用菜单，任何前端框架、任何浏览器都适用的解决方案
王佳斌
02-16 5296
微信公众号网页H5禁用长按弹出的菜单，uniapp vue项目 H5网页在微信浏览器怎么禁用长按图片弹出的菜单，微信公众平台禁用微信h5的长按弹窗，禁用h5页面中长按图片弹出的弹层，react vue uniapp 网页H5怎么禁止微信公众号h5页面长按弹出菜单，前端公众号网页如何禁用长按图片显示的菜单，H5网站微信公众号页面禁止长按弹出系统菜单,兼容ios和安卓，微信公众号h5页面图片长按问题，彻底解决H5页面中长按保存图片，HTML5网页公众号移动端网页怎么把长按图片弹出的菜单去掉，微信公众号 - 禁用
微信H5实现网页长按保存图片及识别二维码
热门推荐
weixin_34335458的博客
08-19 1万+
实现微信H5实现网页长按保存图片及识别二维码 使用工具 html2canvas 官方文档 html2canvas.hertzen.com/ canvas2image github.com/hongru/canv… 实施方案 将DOM 使用html2canvas转化成cavas对象 再将cavas对象使用canvas2image(封装toDataUR方法L)转化为png、jpeg等格式 操作步骤...
长按二维码或者图片保存
05-12
长按二维码或者图片保存 下载可以直接用
vue 生成海报，解决跨域问题 ，下载图片到本地
hflxia的博客
09-09 3856
// 获取图片元素 // 创建图片元素 var img = new Image(); //设置图片跨域 img.setAttribute("crossOrigin", "anonymous"); //设置图片路径 img.src = url; //下载图片 img.onload = function() { //创建画布 var can = document.createEleme...
vue保存html为图片功能
最新发布
lucky___qyx的博客
08-23 669
实现有滚动条的内容保存为图片
vue——将页面保存为图片
为写出赏心悦目、容易维护的代码而探索
01-03 4278
将页面元素保存为图片
vue 手机端长按事件，长按保存图片
WMW_wmw的博客
08-26 1630
主要使用@touchstart、 @touchmove、 @touchend。touchmove事件是避免长按滑动手机触发down事件。
vue 长按保存图片事件
qq_68695044的博客
12-28 731
vue没有封装真正的长按事件，所以我们这里用@touchstart，@touchmove，@touchend事件来代替。直接上代码，中间这里是用的是保存canvas的方法。
html2canvas.js 长按页面保存为图片的功能实现
10-09
html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面...
【纪念】微信公众号H5如何解决无法长按保存图片的问题
qq_38212421的博客
08-24 3673
首先全局搜索有没有img标签下使用了pointer-events：none这个样式 当时我全局是搜到了这个样式，然后就把它注释掉，但是我写的那个弹窗的图片还是长按不了，中间修改并且测试，又换了base64，简直是摧残人的心灵，改了好久最后还是通过改样式才好，折腾了好久，我下面贴一下我写的代码： css部分 img { pointer-events: auto; } .share-box { position: fixed; width: 16rem; height: 20.4rem; b
uni-app app实现web-view H5图片长按下载
02-28
在H5页面中，为每个需要长按下载的图片元素添加此事件监听器： ```html 图片URL" onlongpress="handleLongPress"> ``` 3. **处理长按事件** 在JavaScript中定义`handleLongPress`函数，处理长按事件，创建下载...
vue 长按图片保存分享
qq_44410862的博客
12-04 1655
<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"></scr
vue h5页面长按保存为图片
weixin_42508745的博客
03-03 2367
npm install html2canvas -d <template> <div class="index"> <div id="captureId" class="capture" v-show="firstFlag"> <ul> <li>itemi</li> ...
vue H5 长按图片保存分享
aiyang1214878408的博客
10-19 4719
h5端长按图片分享功能 在移动h5开发中，经常会遇到需要长按图片可以保存的本地的需求。 在标签中写入触摸事件 <div class="codeBox" @touchstart="touchStart()" @touchend="touchEnd()"></div> 然后在methods里面定义方法 touchEnd(){ //手指离开 clearTimeout(this.Loop); },
vue H5 实现长按图片实现图片保存
yuangegena_Blog
04-30 5103
vue H5 实现长按图片实现图片保存 实现图片保存时非常常见的功能，直接上代码 由于我的项目用的是mint-ui，需要弹框出现img <mt-popup v-model="popupVisible" popup-transition="popup-fade" > <img class="code-img" @touchstart="start" ...
vue下载图片
Meditation_Crazy
11-29 2156
主要内容 downloadIamge(imgsrc, name) {//下载图片地址和图片名 var image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { var canvas = doc...
vue把页面转成图片并下载pdf
weixin_47568895的博客
05-15 327
【代码】vue把页面转成图片并下载pdf。
vue实现点击按钮保存图片
Guoxuxinwen的博客
03-11 2780
HTML部分： <div class="btn" @click="saveImg">保存海报</div> js部分： downloadIamge: function(imgsrc, name) { let image = new Image(); image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { let canvas =
vue编写APP长按保存图片至本地
06-02
要实现在Vue编写的APP中，长按保存图片至本地，可以参考以下步骤： 1. 首先，在Vue组件中引入HTML5的FileSaver库，用于将文件保存到本地。 ``` npm install file-saver --save ``` 2. 在需要保存图片的地方，添加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值