vue2.x 图片长按分享

2020-08-08  本文已影响0人  王清水

插件: a,生成二维码的 qrcodejs2   ==>    "0.0.2"
            b,截图使用 html2canvas    ==>    "^1.0.0-rc.5" 

a,生成二维码,text 是二维码地址

 生成图片会遇到的相关问题:
     1,图片地址是网络地址,无法将图片截取下来;  解决方案: 将地址转为base64
     2,生成图片是全屏幕截取,不能特定区域截取;或者特定区域截取后有空白或者样式丢失 ;

网络地址图转base64

考虑到多个页面都可能会用到截取方法,结合又是单页面项目,这里 使用 js引入+ class名来实现构造:

1,创建js文件,picSave.js 2,在main.js中引用 3,直接在相关的组件中使用即可

展示结果:需求  ==》 上方选择图片+生成下面的大图展示,由于是h5,直接考虑长按保存;

1,页面二维码已经生成 2,点击保存后,截取大图,覆盖在页面上方,支持长按 注意,当选取多张图生成后,base64可能很大,使用网页地址直接打开可能只有一部分,这不是错误,请搜索base64解析器,生成的内容其实是对的!

相关的设置主要在截图那的设置,这里的截图和相关内容是符合我当前项目的,不符合可自行尝试改变相关参数

上一篇 下一篇

猜你喜欢

热点阅读