vue 中生成二维码，合成海报

1、分别引入 qrcodejs2、html2canvas
执行以下命令行

npm install qrcodejs2
npm install html2canvas

2、下载canvas2image，切记是下载源码至本地，不是安装
2.1、`新建canvas2image.js文件夹

var Canvas2Image = function () {// 这里面放canvas2image源码
}
export default Canvas2Image`

2.2、在使用的页面引入对应的文件如下：

import QRCode from "qrcodejs2";
import html2canvas from 'html2canvas';
import Canvas2Image from '@/libs/canvas2image';

如果一定要安装：canvas2image，你可以试试，会报错导致找不到对应的Canvas2Image.convertToPNG（）方法

3、DOM结构如下

<div class="main"><!-- 海报 html 元素 --><div id="posterHtml" ref="posterHtml" ><div class="posterHtml"><!-- :src="posterHtmlBg" --><imgsrc="@/assets/111.jpg"style="width:100%;height:100%"><div class="posterklass">我是文本,邀请您:</div><!-- 二维码 --><!-- <div id="qrcodeImg" v-if="postcode"></div> --><div id="qrcodeImg" ></div></div></div><div id="myCanvas" class="my_canvas"></div><span class="tip">长按保存该海报，邀请好友来测！</span></div>

4、执行脚本
4.1、生成二维码

createQrcode(text) {// 生成二维码const qrcodeImgEl = document.getElementById("qrcodeImg");qrcodeImgEl.innerHTML = "";let width = document.documentElement.clientWidth;width = width * 0.32;let qrcode = new QRCode(qrcodeImgEl, {width: width,height: width,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H});qrcode.makeCode(text);this.createPoster();},

4.2、合成海报

createPoster() {// 生成海报const that = this;// const domObj = document.getElementById("posterHtml");const domObj = that.$refs.posterHtml;var width = document.documentElement.clientWidth;var height = document.documentElement.clientHeight;var canvas = document.createElement("canvas");// 为了防止合成的图片失真，需要将图片扩大2倍；var scale = 2;canvas.width = width * scale;canvas.height = height * scale;// 由于合成的图片需要展示在当前页面；再将绘画的图片缩放canvas.getContext("2d").scale(1, 1);var opts = {scale: scale,canvas: canvas,logging: true,width: width,height: height,useCORS: true,allowTaint: false,logging: false,letterRendering: true,};html2canvas(domObj, opts).then(function(canvas) {var context = canvas.getContext("2d");// 重要 关闭抗锯齿context.mozImageSmoothingEnabled = false;context.webkitImageSmoothingEnabled = false;context.msImageSmoothingEnabled = false;context.imageSmoothingEnabled = false;var img = Canvas2Image.convertToPNG(canvas,canvas.width,canvas.height);// Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height)that.postshow = false;that.postcode = false;// img.style.width = canvas.width / 2 + "px";// img.style.height = canvas.height / 2 + "px";img.style.width = '100%';img.style.height = '100%';img.style.position = "absolute";img.style.top = "0px";img.style.left = "0px";document.getElementById("myCanvas").appendChild(img);that.$nextTick(() => {let e =  document.querySelector("#posterHtml");e.style.display = "none";})});}

4.2.1、生成海报注意事项：
a、创建的canvas宽高一定要记得扩大一倍；
如：

`var canvas = document.createElement("canvas");// 为了防止合成的图片失真，需要将图片扩大2倍；var scale = 2;canvas.width = width * scale;canvas.height = height * scale;`

b、为了展示在当前手机屏幕中，（合成图片自适应）；
需要将图片缩放。如：

// 由于合成的图片需要展示在当前页面；再将绘画的图片缩放canvas.getContext("2d").scale(1, 1);

vue 中生成二维码，合成海报相关推荐

Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
生成二维码合成海报并下载
生成二维码,选择一张海报,然后生成二维码并下载, 主要代码生成二维码代码 ///生成二维码var qrcode = new QRCode("qrcode");// 生成二维码的方 ...
vue中生成二维码并自动批量下载
项目中经常又这样的需求,要求将字符串生成二维码,并下载下来一般分为生成一个二维码展示并下载,对于这种你只需调用 qrcodejs2生成二维码就可以了下载也是按钮触发今天我们要说的是批量下载, ...
在Vue中生成二维码扫描在手机上跳转页面
使用方法: 安装vue-qr npm install vue-qr --save 在components新建一个vue组件,eg:vueQr.vue (以下为组件完整代码) <template& ...
在Vue中生成二维码(前端生成二维码:Qrcode)
1.首先我们需要使用"npm install --save qrcode"下载依赖包 npm install --save qrcode 2.在要使用qrcode的页面导入qrco ...
Vue项目生成二维码
场景: [民主测评.闭卷测试] Vue项目生成二维码,使用手机浏览器扫码录入答题一,创建vue项目,样式布局,接口联调, npm run build 打包成dist 文件,让后台发送到服务器中,页面 ...
【工具】Vue中生成二维码组件——vue-qr
[工具]Vue中生成二维码组件--vue-qr npm地址--https://www.npmjs.com/package/vue-qr 注:不支持IE浏览器效果 1.安包 npm install v ...
Vue批量生成二维码并分页打印，组件形式实现
Vue批量生成二维码并分页打印,组件形式实现一. 最终效果二. 实现方式一. 最终效果二. 实现方式安装qrcodejs2插件: // 终端执行 npm install qrcodejs2 ...
在java中生成二维码，并直接输出到jsp页面
在java中生成的二维码不存到磁盘里要直接输出到页面上,这就需要把生成的二维码直接以流的形式输出到页面上,我用的是myeclipse 和 tomcat 它的原理是:在加载页面时,根据img的src(c ...

vue 中生成二维码，合成海报

vue 中生成二维码，合成海报相关推荐

最新文章

热门文章