热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jscanvas实现二维码和图片合成的海报

这篇文章主要为大家详细介绍了jscanvas实现二维码和图片合成的海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了canvas二维码和图片合成海报的具体代码,供大家参考,具体内容如下

思路:在微信中登录,后台传来的是一个链接、一个名字、一张图片。把图片当做背景,画满整个画布。之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成一张图片,画到大的画布上。把名字画到画布上。把整张画布转为图片。

一、定义画布和合成海报的img


二、用jquery.qrcode把网址变成二维码

后台传过来的是网址,需要转为二维码,二维码也是canvas,需要把二维码转为图片

$("#qrcode").qrcode({
 width: 72, //宽度 
 height: 72, //高度 
 text: res.data.poster_qrcode, //任意内容 
});

三、把图片画到画布上,需要占满全屏

//画海报
var width = document.getElementById("canbox").offsetWidth; //宽度 
var height = document.getElementById("canbox").offsetHeight; // 高度
var c = document.getElementById("myCanvas");
c.width = width
c.height = height
var ctx = c.getContext("2d");
//首先画上背景图
var img = new Image();
img.src = this.list.poster;
img.setAttribute("crossOrigin", 'Anonymous')
var x_bot = height - 44 //画上名字
ctx.fOnt= "19px Georgia";
//画上二维码
function convertCanvasToImage(canvas) {
 var image = new Image();
 image.src = canvas.toDataURL("image/png");
 return image;
}
var mycans = $('canvas')[1];//二维码所在的canvas
var codeimg = convertCanvasToImage(mycans)
var xw = width - 72 - 29
var xh = height - 6 - 72
img.Onload= function() { //必须等待图片加载完成
 ctx.drawImage(img, 0, 0, width, height); //绘制图像进行拉伸
 ctx.fillText(that.name, 28, x_bot);
 ctx.drawImage(codeimg, xw, xh, 72, 72);
 //绘制完成,转为图片
 setTimeout(function() { //在ios上无法在画完之后取到整个画布内容,加了个settimeout
 var bigcan = $('canvas')[0];
 let images = new Image();
 images.src = bigcan.toDataURL("image/png");
 alert(bigcan.toDataURL("image/png"))
 images.setAttribute("crossOrigin", 'Anonymous')
 $('.canimg').attr('src', bigcan.toDataURL("image/png"))
 }, 0)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 本文介绍如何通过SQL查询从JDE(JD Edwards)系统中提取所有字典数据,涵盖关键表的关联和字段选择。具体包括F0004和F0005系列表的数据提取方法。 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
author-avatar
lovely蓝衣13
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有