canvas微信图片生成海报

前言

之前在做项目的时候需要做一个生成海报的功能，最初使用的html2canvas这个工具，在使用过程中发现安卓上的海报是正常的，而苹果上样式有问题，例如错、空白，最终选择直接用canvas自己画。

难点

海报中重要的二维码是一个线上地址，存在于微信服务器上，受同源策略的影响，在调用canvas.toDataURL 是报错，不允许域外资源，防止画布被污染。

解决

因为当前项目使用了Koa，就想到把图片下载到本地。
流程如下图：

*注：koa发送到Java后端这部分属于服务器对服务器发送请求不存在跨域，跨域是针对浏览器来说的。

前端代码

   loadImage(src){return new Promise((resolve, reject) => {let xhr = null;if (window.XMLHttpRequest)xhr = new XMLHttpRequest();else if (window.ActiveXObject)xhr = new ActiveXObject('Microsoft.XMLHTTP');xhr.onload = () => {if (xhr.status === 200) {const reader = new FileReader();reader.addEventListener('load', () => resolve(reader.result), false);reader.addEventListener('error', e => reject(e), false);reader.readAsDataURL(xhr.response);} else {reject(`Failed to proxy resource ${src} with status code ${xhr.status}`);}};xhr.onerror = reject;xhr.open('GET', src,true);// 设置请求头部//xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');xhr.responseType = 'blob';xhr.send();});}//  在react 中使用this.loadImage('/httpImg?url='+url).then(res=>{// res 就是 base64this.setState({ imgBase64:res });}).catch(err=>{cb.utils.alert('获取微信二维码失败:'+err,'error');})

koa转发请求

    router.get('/httpImg', async function (ctx) {ctx.set('Access-Control-Allow-Origin', '*');ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');ctx.set('Access-Control-Allow-Methods', 'GET, OPTIONS');try {const url = decodeURI(ctx.request.query.url);const result = request.get(url);ctx.body = result;} catch (e) {ctx.body = {code: 500,message: e.message}}})

canvas微信图片生成海报相关推荐

微信小程序canvas合成图片（海报）,生成的图片展示不出来，或者空白。
背景: 1.用户点击分享朋友圈,将二维码与一张背景图合成一张图片,然后将其显示. 2.用户点击保存图片将图片保存到手机相册里面. 问题: 用户点击分享盆友圈合成后的图片显示空白.控制台可以打印出来链接 ...
android canvas png 失真,【小程序】--------------处理canvas导出图片模糊问题-------------【劉】...
一.业务需求: 使用canvas在前端生成海报,并在海报上添加上水印.最后导出图片并保存到本地. 二.业务逻辑实现: (1)创建canvas画布======>(2)在canvas上绘制海报=== ...
uni-App小程序、canvas 生成海报 +下载图片+分享微信好友
功能:分享弹窗,生成海报并支持保存,目前仅支持微信小程序 ·插件包链接 https://ext.dcloud.net.cn/plugin?id=586 代码: <template>< ...
微信小程序，使用canvas画图生成海报并保存手机相册
需求:需要根据背景图片和用户的微信的头像和昵称,生成一张海报图,并保存到手机相册. 首先在画布上绘制海报背景图片,然后再绘制头像.昵称和挑战成功的信息. 代码如下: getImageInfo() {r ...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程效果预览代码实现点击触发生成海报在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
uniapp实现canvas制作微信小程序海报,线上图片
先看下效果图生成海报后,点击保存到相册,会调起请求权限,是否同学调用我们的相册,允许之后,这张海报就会自动存入我们的相册具体实现: <view class='canvas-box' v-sh ...
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
uniapp项目中使用canvas生成海报并保存、微信分享、发送至朋友圈
uniapp项目中使用canvas生成海报并保存.微信分享.发送至朋友圈 1.html <canvas canvas-id="poster&qu ...
微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用
微信小程序-运用painter插件生成海报–比canvas好用先放插件地址:https://github.com/Kujiale-Mobile/Painter 还有个可视化把海报生成代码的地址:ht ...
小程序通过canvas生成海报保存为图片的技巧
小程序通过canvas生成海报保存为图片的技巧最近公司要求在小程序点击分享,要生成一张图片,可以保存在用户相册里,图片里的内容根据后台返回的数据生成,这就涉及到小程序画布的知识了,因为微信文档上,画 ...

canvas微信图片生成海报

前言

难点

解决

canvas微信图片生成海报相关推荐

最新文章

热门文章