纯前端生成海报手动拼接canvas以及html2canvas

2023-12-14 19:52| 来源: 网络整理| 查看: 265

本文介绍了生成海报的各种方法，以及canvas插入图片浏览器跨域问题。

手工拼接canvas

最近的几个需求全都需要生成海报，后端那边没有现成的生成海报的方法还不可控，所以就由前端生成海报生成海报肯定就离不开canvas，如果不是很复杂的海报就完全可以手动拼接然后生成base64格式，最后下载。具体的操作步骤就是先在canvas上吧背景文字都插入好，然后通过toDataURL( 'image/png' )方法实现转化，转化后就是一张图片了，想怎么用就怎么用

generatePosterShoudong() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d") var img = new Image() var haibaoUrl = '' img.onload = function() { ctx.drawImage(img, 0, 0, 750, 1334) // 插入二维码 var qrcode = new Image(); qrcode.src = qrCodeBase64 // 这里的二维码用的是toqrcode的插件 qrcode.onload = function() { ctx.drawImage(qrcode, 517, 1028, 160, 160) } // 插入名字文字 ctx.font = "40px Arial" ctx.fillStyle = '#FFF' ctx.fillText('用户AAA',178,87); // 插入名字文字 ctx.font = "32px Arial" ctx.fillStyle = '#FFF' ctx.fillText("邀请你免费领礼包",178,137); // 插入头像 var head = new Image(); head.src = headBase64 head.onload = function() { ctx.save() ctx.arc(100, 100, 48, 0, Math.PI * 2, false); // 生成圆角头像 ctx.clip() ctx.drawImage(head, 50, 50, 98, 98) ctx.restore() haibaoUrl = canvas.toDataURL( 'image/png' )// 这里就是拼好的海报base64了 } } img.src = haibaoUrl } 跨域问题

由于浏览器的同源策略，直接引入图片链接是会爆同源策略的报错的，所以就需要用到原始的图片格式base64，只要拿到了base64各式，图片就会任你摆布。我这里用到的方法是后端提供url转base64的接口，要拼接之前先去后端调用一下。

还用一种方法是把要用到的图片先转换好，推荐菜鸟教程的这个网站，在线转base64，转换速度还是很快的，然后把它以json格式传到项目的静态资源库，像是这样：然后按照get请求一样调用就好了，也不需要后端，也减少了前端的负担，两全其美😄。

还有一个通用的图片转base64的方法，如果你的图片和项目在一个源下，就可以直接前端转换。

convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Anonymous'; img.onload = function(){ canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img,0,0); var dataURL = canvas.toDataURL(outputFormat || 'image/png'); callback.call(this, dataURL); canvas = null; }; img.src = url; } 点击直接下载到本地

创建一个a链接模拟点击就会直接下载到本地（仅PC有效）

var a = document.createElement('a') a.href = canvas.toDataURL( 'image/png' ) a.download = '千图分享海报' // 设定下载名称 a.click()

直到这里基本上已经可以生成海报了，还有一个引入组件html2canvas实现更复杂的生成海报，他的工作原理就是吧网站上的html转给它，他就会生成对应的canvas，功能比较强大。首先需要官网引入js文件： html2canvas，然后调用方法把html传进去就好了。

这里依然会出现跨域问题，所以还是要用到上面的转换base64的方法。

html2canvas html2canvas(document.querySelector("#capture")).then(canvas => { //canvas就是生成好的canvas let href = canvas.toDataURL('image/png') // 将画布内的信息导出为png图片数据 this.imgBase64 = href });

【本文地址】

公司简介

联系我们