vue H5页面实现海报功能demo

demo展示地址：(扫描图片二维码即可体验)

1.准备插件 qrcanvas和html2canvas（npm装好）

2.html代码（布局按个人喜好）

<template><div><!-- 设置了两个块区域 当点击了生成海报时把canvas转换成base64的图片，然后把最开始当样式隐藏掉 把获取的的base64的地址赋值给src--><img v-if="!test" :src="imgSrc" alt /><div v-else><img src="~@/assets/images/qrcode/timg.jpeg" alt /><div id="qrcode"></div><button @click="btn">点我生成一张海报(记得长按页面保存哦))</button></div></div>
</template>

3.js代码

<script>
//生成一个二维码
import { qrcanvas } from "qrcanvas";
//将整个页面转换成canvas
import html2canvas from "html2canvas";export default {data() {return {test: true,imgSrc: ""};},mounted() {this.$nextTick(() => {//生成一个二维码 data是二维码跳转的地址（写自己需要跳转的地址即可）const canvas = qrcanvas({data: location.href});document.getElementById("qrcode").appendChild(canvas);});},methods: {btn() {//点击生成canvas转换成base64的图片this.$nextTick(() => {const that = this;html2canvas(document.body).then(function(canvas) {console.log(canvas.toDataURL());that.imgSrc = canvas.toDataURL();});//隐藏元素this.test = false;});}}
};
</script>

vue H5页面实现海报功能demo相关推荐

VUE H5页面微信/QQ/微博分享连接设置
VUE H5页面微信/QQ/微博分享连接设置问题想改变分享的标题.副标题.图片以及重定向打开的地址? 解决第一步:在项目控制台里面 npm i -S weixin-js-sdk ( 然后视情况 ...
Vue制作页面在线裁剪功能
React版:React制作页面在线截图功能项目背景写了一个关于身份证.驾驶证.行驶证OCR识别的页面.但是用户上传照片的时候不是单独上传,把3个证件摆放在一起上传的.于是业务部门提出能不能制作一 ...
vue H5页面制作微信公众号前期准备
首先vue项目的搭建过程就不说了接下来进入正题最重要的是配置成手机端页面也就是h5页面: vue项目中在index.html中配置 <meta name="viewport&quo ...
vue H5页面跳转微信小程序以及生成二维码跳转小程序
研究了两种H5跳转小程序的方法,同时携带参数 1. 手机浏览器打开H5页面,点击按钮拉起微信小程序 2. H5页面上生成小程序二维码,手机微信扫码跳转目标小程序为了开发方便,以上两种均借助了微信小程 ...
vue H5页面唤起手机app（iOS和Android），没有安装则跳转下载页面
现在好多的app应用都有对应的h5页面,那么h5和app直接是如何交互的呢? 这里使用的是Scheme协议. 什么是URL Scheme? android中的scheme是一种页面内跳转协议,是一种非 ...
vue项目之H5 app 生成海报功能
一.需求本次[世纪盛典]活动,分为三期,每期都有海报相关的工作内容. 海报带有动态的个人信息.头像.证书编号及二维码等. 本次活动需要在微信h5.小程序.app里面正常启动. 二.经过网上查找使用 ...
html 5 调用手机条码扫描,vue h5页面如何实现扫一扫功能，扫条形码获取编码
如图这是我在网上找的一个方法,使用h5的Barcode实现扫码的功能,但代码报错 'plus' is not defined ,是什么原因呢?,现在在手机上真机测试点击扫描也没反应,没调取摄像头,有老 ...
Vue H5页面实现拍照解析二维码功能
因为需要做移动端实现扫码功能(app和h5都可用),H5不能调用手机扫码功能.所以采用先拍照获取二维码文件流再解析二维码数据. 需要以下3个js文件支持,网上可以下载到:(引用顺序如下) 上面js我做 ...
【H5微信授权】简单实现H5页面微信授权功能，微信开发者工具报错系统错误，错误码-1，undefined解决办法【详细】
前言最近写到了H5公众号,需要微信授权的功能. 这里记录一下授权的流程和踩了个坑图片授权代码执行后会跳转到授权的地方,没有授权的会有确认授权,授权过得会这样,直接自动登录,然后再跳转到中转页授 ...

vue H5页面实现海报功能demo

vue H5页面实现海报功能demo相关推荐

最新文章

热门文章