美文网首页
vue2.x 图片长按分享

vue2.x 图片长按分享

作者: 王清水 | 来源:发表于2020-08-08 20: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解析器,生成的内容其实是对的!

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

    相关文章

      网友评论

          本文标题:vue2.x 图片长按分享

          本文链接:https://www.haomeiwen.com/subject/kjahdktx.html