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" -->
<img
src="@/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);
文章浏览阅读3.8k次。1、将下载好的萤石js插件,添加到SoringBoot项目中。位置可参考下图所示。(容易出错的地方,在将js插件在html页面引入时,发生路径错误的问题)所以如果对页面中引入js的路径不清楚,可参考下图所示存放路径。2、将ezuikit.js引入到demo-live.html中。(可直接将如下代码复制到你创建的html页面中)<!DOCTYPE html><html lan..._ezuikit 测试的url
文章浏览阅读322次。第二步,在弹出的对话框选择,设备驱动—>PLC—>莫迪康—>ModbusRTU—>COM,根据配置软件选择的协议选期期,这里以此为例,然后点击“下一步”。第四步,把使用虚拟串口打勾(GPRS设备),根据需要选择要生成虚拟口,这里以选择KVCOM1为例,然后点击“下一步”设备ID即Modbus地址(1-255) 使用DTU时,为下485接口上的设备地址。第六步,Modbus的从机地址,与配置软件相同,这里以1为例,点击“下一步“第五步,Modbus的从机地址,与配置软件相同,这里以1为例,点击“下一步“_组态王ua
文章浏览阅读9.4k次,点赞22次,收藏19次。安装npm相当于安装node.js,Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西_npm安装配置
文章浏览阅读748次,点赞21次,收藏26次。大家好,小编来为大家解答以下问题,python基础训练100题,python入门100例题,现在让我们一起来看看吧!宝子们还在新手村练级的时候,不单要吸入基础知识,夯实自己的理论基础,还要去实际操作练练手啊!由于文章篇幅限制,不可能将100道题全部呈现在此除了这些,下面还有我整理好的基础入门学习资料,视频和讲解文案都很齐全,用来入门绝对靠谱,需要的自提。保证100%免费这不,贴心的我爆肝给大家整理了这份今天给大家分享100道Python练习题。大家一定要给我三连啊~
文章浏览阅读1k次。 为了在 Linux ( Ubuntu) 上安装sublime,一般大家都会选择常见的教程或是 sublime 官网教程,然而在国内这种方法可能失效。为此,需要用安装包安装。以下就是使用官网安装包安装的教程。打开 sublime 官网后,点击右上角 download, 或是直接访问点击打开链接,即可看到各个平台上的安装包。选择 Linux 64 位版并下载。下载后,打开终端,进入安装..._ubuntu 安装sumlime text打不开
文章浏览阅读563次,点赞13次,收藏6次。CrossOver24是一款类虚拟机软件,专为macOS和Linux用户设计。它的核心技术是Wine,这是一种在Linux和macOS等非Windows操作系统上运行Windows应用程序的开源软件。通过CrossOver24,用户可以在不购买Windows授权或使用传统虚拟机的情况下,直接在Mac或Linux系统上运行Windows软件和游戏。该软件还提供了丰富的功能,如自动配置、无缝集成和实时传输等,以实现高效的跨平台操作体验。
文章浏览阅读1.7k次。一个用聊天的方式让ChatGPT帮我写的线程安全的环形List_为什么gpt一写list就卡
文章浏览阅读336次。我们在前面的文章里曾写过Web应用中乱码产生的原因和处理方式,旧文回顾:深度揭秘乱码问题背后的原因及解决方式其中我们提到可以通过Filter的方式来设置请求和响应的encoding,来解..._filterconfig selectencoding
文章浏览阅读651次。转自:http://www.jb51.net/article/36480.htmencodeURI和decodeURI是成对来使用的,因为浏览器的地址栏有中文字符的话,可以会出现不可预期的错误,所以可以encodeURI把非英文字符转化为英文编码,decodeURI可以用来把字符还原回来_js encodeur decodeurl
文章浏览阅读1.9w次,点赞6次,收藏3次。前言在日常的Android开发当中,我们肯定要打包apk。但是今天我打包的时候遇到一个很奇怪的问题Android The destination folder does not exist or is not writeable,大意是目标文件夹不存在或不可写。出现问题的原因以及解决办法上面有说报错的中文大意是:目标文件夹不存在或不可写。其实问题就在我们的打包界面当中图中标红的Desti..._the destination folder does not exist or is not writeable
文章浏览阅读94次。一、配置代码编辑区的样式 <1>打开Eclipse,Help —> Install NewSoftware,界面如下: <2>点击add...,按下图所示操作: name:随意填写,Location:http://eclipse-color-th..._ecplise高大上设置
文章浏览阅读2.8k次。一,下载mysql:http://dev.mysql.com/downloads/mysql/; 打开页面之后,在Select Platform:下选择linux Generic,如果没有出现Linux的选项,请换一个浏览器试试。我用的谷歌版本不可以,换一个别的浏览器就行了,如果还是不行,需要换一个翻墙的浏览器。 二,下载完后解压缩并放到安装文件夹下: 1、MySQL-client-5.6.2_linux mysql 安装 mysql-5.6.24-1.linux_glibc2.5.x86_64.rpm-bundle