JavaScript实现海报二维码生成+下载自定义名称[精选]

最新推荐文章于 2024-04-30 14:03:04 发布

路克森

最新推荐文章于 2024-04-30 14:03:04 发布

阅读量1.9k

点赞数 8

分类专栏：整合问题案例文章标签： JavaScript 设计

本文链接：https://blog.csdn.net/qq_39057639/article/details/101043099

版权

博主个人主页

观看本章节分享的内容建议学习过canvas

图片下载建议放在服务器环境下配合DOM使用ToDataURL也建议放在服务器环境下

本次DEMO效果图
在这里插入图片描述
资料获取地址
链接：https://pan.baidu.com/s/1g13Lee61gy1jXmTxWOQkWQ
提取码：j1d7

前言

现在非常多的网站都会生成一些海报和二维码做一些特殊的业务例如邀请分享等今天我们来看Js中如何使用qrcode+canvas实现海报的生成和下载

其实还是一张背景图加上一张二维码绘制到了同一个canvas中但是需要注意的是 canvas 中先被加载的图像会被先绘制后加载的后绘制因此图片的显示顺序需要我们自己控制一般来说小的图片加载的快大的则慢在这里我们通过在回调中绘制二维码才得以不会被覆盖掉

我们先来看使用把

使用

配图这张图可以是你们的画报哦我这里随便搞了一张
在这里插入图片描述
在就是我们的二维码的生成位置需要我们自己调整哦

具体的使用我们可以看注释哦都非常的详细一行一行解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!-- 引包 这个都懂把 不多说了  -->
    <script src="jquery.min.js"></script>
    
    <!-- qrcode 的js文件 生成二维码需要 -->
    <script src="qrcode.min.js"></script>
    
</head>
<body>

最低0.47元/天解锁文章

路克森

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
JavaScript实现海报二维码生成+下载自定义名称[精选]

博主个人主页观看本章节分享的内容建议学习过canvas本次DEMO效果图资料获取地址链接：https://pan.baidu.com/s/1g13Lee61gy1jXmTxWOQkWQ提取码：j1d7前言现在非常多的网站都会生成一些海报和二维码做一些特殊的业务例如邀请分享等今天我们来看Js中如何使用qrcode+canvas实现海报的生成和下载其实还是一张背景图加上一张二...
复制链接

扫一扫