生成有背景的二维码图片及本地下载（canvas+qrcode）

最新推荐文章于 2023-12-26 09:00:00 发布

伪成年_young

最新推荐文章于 2023-12-26 09:00:00 发布

阅读量1.4k

点赞数 1

分类专栏：二维码插件 css样式文章标签： javascript css3 html

本文链接：https://blog.csdn.net/u012552674/article/details/109991243

版权

css样式同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

二维码插件

2 篇文章 0 订阅

订阅专栏

先看下效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./qrcodejs-master/qrcode.js"></script>
</head>
<body>
  <div class="page">
      <!-- 二维码 -->
      <div class="imgClass" style="visibility: hidden;" id="qrcode"></div>
      <!-- 背景图（背景图片的地址是上传图床后获取的地址） -->
      <img class="imgClass" style="visibility: hidden;" id="backgroundImg" src="https://s3.ax1x.com/2020/11/20/DQMUk8.png" alt="">
      <!-- canvas绘制图片 -->
      <canvas class="imgClass" style="visibility: hidden;" id="canvas"></canvas>
      <!-- 背景图和二维码图生成的新图片 -->
      <div class="imgClass" id="newImage"></div>
  </div>  
</body>

<script type="text/javascript">
    //qrcode
    var qrcodeDom =document.getElementById("qrcode")
    var qrcode = new QRCode(qrcodeDom, {
        text: "bug maker",
        width: 110,
        height: 110,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
    //canvas
    //canvas图布
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    //获取背景图
    var backgroundImg =document.getElementById("backgroundImg");
    //获取qrcode图片
    var qrcodeImg =qrcodeDom.lastChild;
    //放置合成图片
    var newImage=document.getElementById("newImage");
    //新建图片
    var imageNew = new Image();
    backgroundImg.onload = function() {
        backgroundImg.setAttribute("crossOrigin",'anonymous');
        //获取背景图片宽高
        canvas.width =backgroundImg.offsetWidth;
        canvas.height =backgroundImg.offsetHeight;
        //绘制背景图
        ctx.drawImage(backgroundImg,0,0);
        //绘制二维码
        ctx.drawImage(qrcodeImg,70,180);
        //方法返回一个包含图片展示的 data URI 
        imageNew.src =canvas.toDataURL()
    } 
    newImage.appendChild(imageNew);

</script>
<style>
*{
    margin: 0;
    padding: 0;
    border: 0;
}
.page{
    position: relative;
    left: 0; 
    top: 0;
    background-color: rgba(0,0,0,0.5);
    height: 100vh;
    width: 100vw;
}
.imgClass{
    position: absolute;
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%); 
}
</style>
</html>

canvas生成的图片前端下载方法：

downloadImg(){
	let aLink = document.createElement('a')
	let blob = base64ToBlob('canvas生成图片的base64')
	let evt = document.createEvent('HTMLEvents')
	evt.initEvent("click",true,true)
	aLink.download ='图片名字.png'
	aLink.href = URL.createObjectURL(blob)
	aLink.click()
	//图片base64转blob
	function base64ToBlob(){
		let parts = code.split(';base64,')
		let contentType = parts[0].split(':')[1]
		let raw = window.atob(parts[1])
		let rawLength = raw.length
		let uInt8Array = new Uint8Array(rawLength)
		for(let i=0;i<uInt8Array;i++){
			uInt8Array[i] =raw.charCodeAt(i)
		}
		return new Blob([uInt8Array],{type:contentType})
	}
}

关于二维码qrcode插件的使用请参考链接
canvas的使用请参考文档canvas使用

遇到及解决的bug：

报错一：canvasQr.html:92 Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
在这里插入图片描述
报错原因：画布受到了污染。经google 发现原来是受限于 CORS 策略，会存在跨域问题，虽然可以使用图像（比如append到页面上）但是绘制到画布上会污染画布，一旦一个画布被污染,就无法提取画布的数据，比如无法使用使用画布toBlob(),toDataURL(),或getImageData()方法;当使用这些方法的时候会抛出一个安全错误。
解决方法：添加属性backgroundImg.setAttribute("crossOrigin",'anonymous');

报错二：Access to image at ‘https://s3.ax1x.com/2020/11/20/DQMUk8.png’ from origin ‘http://127.0.0.1:51047’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
在这里插入图片描述
报错原因：使用被转换的、引自网络的、或服务器的图片，出现跨域问题。
如果本地测试，图片来自本地，通过file协议打开的html文件进行本地测试，不会出现如上问题。
解决方法：不用解决，放在服务器上就可以正常转换了。
但是如果想在本地测试效果，需做以下配置：
在这里插入图片描述
在桌面新建chrome浏览器的快捷方式，右键-属性-目标中添加
"安装chrome.exe文件的绝对位置" --disable-web-security --user-data-dir=C:\MyChromeDevUserData-应用-确定。通过该快捷方式打开浏览器，打开页面即可。

也可以使用canvas绘制文本给图片添加水印
在这里插入图片描述

伪成年_young

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
生成有背景的二维码图片及本地下载（canvas+qrcode）

先看下效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./qrcodejs-
复制链接

扫一扫