附带有背景图、文字的二维码

前端生成附带有背景图、可添加文字的二维码

下载

npm install jr-qrcod --save

引入

const qrcode = require('jr-qrcode');

使用

<img  id='mix_img'/>

方法

//如果需要二维码和图片一起生成，可以选择如下方式
const loadImg = (src) => {// 为图片添加加载验证，const paths = Array.isArray(src) ? src : [src];const imgArray = [];paths.forEach((path) => {imgArray.push(new Promise((resolve) => {let img = new Image();// img.crossOrigin = "Anonymous";    //允许页面的域名访问，否则无法加载此处JSimg.src = path;img.onload = () => {resolve(img)};}))});return Promise.all(imgArray);
}const getImageData = (text,img,name,tel) => {    //text生成的二维码链接     img图片链接const qrcodes = qrcode.getQrBase64(text)//转换base格式let canvas = document.createElement('canvas')//创建画布const width = document.documentElement.clientWidth//获取浏览器宽度const height = document.documentElement.clientHeight//获取浏览器高度canvas.width = width//给画布设置宽度canvas.height = height//给画布设置高度let ctx = canvas.getContext("2d")//此对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。loadImg([qrcodes,img]).then(([img1, img2]) => {ctx.drawImage(img2, 0, 0, width, height)//设置图片宽高坐标ctx.drawImage(img1, ((width + width) / 7.8), (height - (width) / 0.89), width / 2, width / 2)   //前两个参数来调整二维码的横纵坐标，后两个参数来调整二维码的大小ctx.font="24px 黑体"ctx.fillStyle = '#2E2E2E';ctx.fillText(`${name}邀请您加入洪涛科技`, ((width + width) / 7.5), (height - (width) / 1.9), width / 2, width / 2)ctx.font="16px 黑体"ctx.fillStyle = 'white';ctx.fillText(`${name} ${tel}`, ((width + width) / 4.5), (height - (width) / 0.78), width / 2, width / 2)ctx.save()//保存let imageURL = canvas.toDataURL("image/png")//转换图片为dataURLdocument.getElementById('mix_img').setAttribute('src',imageURL);//放到img标签里localSaveImg = imageURL;})
}调用方法，传入对应的参数：
```javascript
getImageData(tgUrl,shareBg,"hello","world");

结果:整个背景、二维码、文字都会呈现在一张图片上

在使用的过程中可能出现的问题：
1：不能在静态页面中测试，会报如下错误

test.html:73 Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

如果去百度，多数会提示在图片处理的过程中没有添加属性crossOrigin(也就是在图片加载处理的方法loadImg 中),但是如上我们是添加了的。那么还有什么问题？
添加了该属性，图片的正常呈现是要在某个固定的域名下，或者是分离项目本地IP下执行，否则无法正常显示。

附带有背景图、文字的二维码相关推荐

C#生成带背景和文字的二维码图片
/// <summary> /// 生成带背景和文字的二维码图片 /// </summary> /// <param na ...
python生成带背景带文字的二维码图片
2019独角兽企业重金招聘Python工程师标准>>> # -*- coding: UTF-8 -*- from __future__ import unicode_literals ...
PHP多文字，二维码（动态、非动态）生成海报方式
PHP多文字,二维码(动态(支持带logo).非动态)生成海报方式 1.下载二维码插件Phpqrcode,地址 [https://sourceforge.net/projects/phpqrcode/ ...
python查找文字在图片中的位置_图片转文字、二维码互转链接、查找不懂写的字...
我们是一个为大家搜罗一些简单.常用又免费的办公应用的公众号,主要有识别图片中的字体转文字:二维码转链接,链接生成二维码:以及当你不懂写某个字时,通过查词组的方式找出那个字. 1.图片转文字有时候我们 ...
java生成二维码推广海报添加二维码文字水印二维码添加LOGO
前言场景: 一.推广海报贴上二维码,用户扫码跳转二.二维码中间贴logo eg:这里使用展示第一种场景一.使用工具 Google开源项目ZXing(二维条码编解码). ...
Python生成带文字的二维码
import qrcodefrom PIL import Image from PIL import ImageDraw from PIL import ImageFont# 二维码图片地址 QR_I ...
动图怎么做二维码？怎么将gif格式图片生成二维码？
如何将gif动图做成二维码呢?相信很多小伙伴经常会扫描好友制作的二维码图片后,会出现图片.视频等内容,那么静态图片生成二维码的方法相信很多小伙伴都知道,那么gif动图怎么做成二维码来展示呢?下面教大家 ...
视频图片加文字的二维码怎么做？教你在线制作二维码
想要把视频.图片以及文字做成二维码的时候,要怎么操作呢?其实,方法非常的简单,只需要使用操作简单的二维码生成器(https://www.jzx.com/)就能够快速完成二维码制作的操作.下面,给大家分 ...
将头像、文字和二维码三部分，合成一张宣传图片
这里是thinkphp框架用到的图片合成,逻辑都是一样的,不用框架纯php的话,只是文件的保存位置没有那么多的规定,逻辑什么的还是一样的. 作者:悦~ 地址:https://www.cnblogs. ...

附带有背景图、文字的二维码

前端生成附带有背景图、可添加文字的二维码

附带有背景图、文字的二维码相关推荐

最新文章

热门文章