vue2.0 海报生成器、二维码生成器

由前端生成二维码，海报，canvas生成图片的跨域

之前做了一个生成带二维码的图片，需要在生成的图片中附带用户头像、用户昵称、商品图片、商品标题、商品链接二维码，效果图大概长这个样子

开始坑了
首先楼主当时生成图片使用的是html2canvas，生成二维码使用的是xkeshi/vue-qrcode
安装（由于使用的是vue2.0，所以是依赖注入的方法）

npm i xkeshi/vue-qrcode --save
npm i html2canvas --save

引入

import html2canvas from 'html2canvas';
import QRcode from '@xkeshi/vue-qrcode'

在html中写入二维码的标签 <qrcode class="qr_code" :value="qrcodeUrl" v-if="qrcodeUrl" :options="{ size: 65 }"></qrcode>，class随意发挥；value是二维码的链接地址，可以为任意地址，如：https://blog.csdn.net，可带参；options规定了二维码的大小，单位px
注： qrcode标签需要在components中注册， components: { qrcode : QRcode }

至此，二维码就生成好了，只要选对了插件几乎不存在什么问题，接下来开始踩canvas坑，需要生成图片的元素如下：

<div ref="QrcodePage" class="card" :class="activeIndex===0?'card1':activeIndex===1?'card2':''"><div class="user"><img :src="headImg" alt="">             //用户头像<div class="user_name"><p class="overflow_1">{{ $store.state.userInfo.nickName }}</p>     //用户昵称<p>邀请你学习</p></div></div><p class="title">{{ courseInfo.goodsName }}</p>                        //商品标题<img class="course_img" :src="courseInfo.imageUrl" alt="">         //商品图片<p class="scan">长按识别二维码</p><qrcode class="qr_code" :value="qrcodeUrl" v-if="qrcodeUrl" :options="{ size: 65 }"></qrcode>       //二维码
</div>

使用html2canvas生成海报/图片的代码如下：

createImg() {var that = this;let shareContent = this.$refs.QrcodePage, //需要截图的包裹的（原生的）DOM 对象width = shareContent.clientWidth, //shareContent.offsetWidth; //获取dom 宽度height = shareContent.clientHeight, //shareContent.offsetHeight; //获取dom 高度canvas = document.createElement("canvas"), //创建一个canvas节点scale = 4; //定义任意放大倍数 支持小数canvas.width = width * scale; //定义canvas 宽度 * 缩放canvas.height = height * scale; //定义canvas高度 *缩放canvas.style.width = (shareContent.clientWidth * scale) / 100 + "rem";canvas.style.height = (shareContent.clientHeight * scale) / 100 + "rem";canvas.getContext("2d").scale(scale, scale); //获取context,设置scalelet opts = {scale: scale, // 添加的scale 参数canvas: canvas, //自定义 canvaslogging: false, //日志开关，便于查看html2canvas的内部执行流程width: width, //dom 原始宽度height: height,useCORS: true};html2canvas(shareContent, opts).then(function(canvas) {that.qrContentImage = canvas.toDataURL("image/jpeg", 1.0);}).catch(function (reason) {alert(reason)});
},

生成后的展示如下

<div class="card_img"><img :src="qrContentImage">
</div>

在这里需要绘制到海报上的图片有两张，一是用户头像，二是商品图片，无独有偶，这两张图在绘制到canvas上时都产生了跨域问题，现在想想，生成的那张二维码好像也是图片，这小东西怎么就没跨域呢-…-
咳咳，言归正传，当时测试了一下，与当前域名相同的图片不会跨域，本地上传的图片不会跨域，其他来源的图片都会跨域，包括二级域名下的图片
最后的解决办法是将图片的host替换为当前的host，再由nginx转发到正确的host下，代码如下

let newurl = 'http://' +  window.location.host
this.headImg = this.headImg.replace("http://thirdwx.qlogo.cn", newurl)

不过这个方法至适用于来源已知且来源统一的图片，至此使用canvas绘制图片跨域的问题已解决
不过对于来源不统一的图片不适用，后来了解到可以在绘制前使用canvas将图片转为base64精灵图，base64在绘制时并不会产生跨域问题，不过本人并未深入研究，有需求的小伙伴可以继续踩坑

vue2.0 海报生成器、二维码生成器相关推荐

vue2.0 自定义生成二维码（QRCode）组件
1.自定义生成二维码组件 QRCode.vue  <template><canvasclass="qrcode-canvas ...
0基础也能看懂的二维码生成器 API 的技术原理（附Java 接入代码）
写在前面二维码生成器 API 是一种将文本或 URL 转换为二维码图像的技术.在现代生活中,二维码已经成为了很多人生活中不可或缺的一部分,因为它们可以快速识别.易于存储,并具有可靠性.但是,大多数人 ...
警惕新骗术：虚假二维码生成器盗取 4.6 万美元！
作者 | Catalin Cimpanu 译者 | 火火酱责编 | 徐威龙出品 | 区块链大本营(blockchain_camp) 迄今为止,已有9个恶意二维码生成网站从用户那里窃取了4.6万美元 ...
【墙裂推荐】二维码生成器哪个好？
"私域流量"是2019.2020年持续爆火的词,相信在接下来的几年还继续火下去.流量红利殆尽的当下,挖掘老用户更多的价值成为了所有公司的共识,于是私域流量的概念开始大行其道. 二维 ...
PyQt制作二维码生成器
PyQt制作二维码生成器一.Python图形化工具如果用 Python 语言开发跨平台的图形界面的程序,主要有3种选择: Tkinter 基于Tk的Python库,这是Python官方采用的标准库 ...
【愚公系列】2023年04月 .NET CORE工具案例-二维码生成器QRCoder
文章目录前言一.二维码生成器QRCoder 1.QRCoder是什么 2.安装包 3.普通二维码 3.1 创建二维码 3.2 设置二维码颜色 3.3 带logo的二维码 4.艺术二维码 4.1 创 ...
C#版二维码生成器附皮肤下载
原文 C#版二维码生成器附皮肤下载前言本文所使用的二维码生成代码是谷歌开源的条形码图像处理库完成的,c#版的代码可去https://code.google.com/p/zxing/download ...
标星7000+，这个 Python 艺术二维码生成器厉害了！
微信二维码,相信大家也并不陌生,为了生成美观的二维码,许多用户都会利用一些二维码生成工具. 今天推荐给大家一个有趣的开源项目--Python二维码生成器(目前7.3K Star, GitHub项目地址 ...
PyQt5实战之二维码生成器（一）：基本界面设计
前言大家好,这里是Seon塞翁.本实战项目为构建一个桌面应用,功能是定制二维码,实现多种数据类型的嵌入,和二维码样式的多样化. 涉及知识点:基于 PyQt5 的界面构建和功能实现(包括标签.按钮.文 ...
微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器文章目录微信小程序项目实例--二维码生成器一.项目展示二.项目核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示项目是一个简单实 ...

vue2.0 海报生成器、二维码生成器

由前端生成二维码，海报，canvas生成图片的跨域

vue2.0 海报生成器、二维码生成器相关推荐

最新文章

热门文章