在小程序中实现海报制作

　wx.canvasToTempFilePath(object, component) 通过这个方法把画布的指定区域的内容导出生成指定大小的图片，并返回一个文件路径。
这里容易出现的问题就是生成的图片好像有些失真，解决办法是在canvas绘制的时候，将整个宽高的比例都给等比放大一些，然后保存图片的时候保存为原比例，这样就能保证图片的分辨率。

如果项目的需求没有这么简单，需要用户自己操作编辑文字，修改图片，调整大小，以及移动位置，需要用户自行排版布局的话，我们使用的微信提供的方法就显得有些无力。
首先，文字方面，用canvas的时候会发现，文字的宽度总是会有些许误差，这些误差会在某些换行的时候暴露，如果我们将每一个字都创建为一个对象，记录坐标值的话也是不可行的，因为文字的宽度并不是固定的，数字1的宽度和数字8的宽度是不一样的，两个数字放在一起的宽度又不是两个宽度的和，而是一个新的宽度，这样我门就算勉强写出来，也一样是有误差的，而且误差会随着字数变多而变大。

这里就想到了一个插件，html2canvas，但是微信小程序的DOM操作和H5的DOM操作是不同的，所以这个插件并不适用，那么我们的思路就只能是放弃小程序，用H5制作海报。
小程序中打开制作海报的页面，然后利用webview打开一个自己制作的H5页面，在H5页面中我们可以随意的使用插件完成绘图，绘图成功后会生成一个base64码，我们可以用微信提供的小程序与webview的通信方法，但是不建议这么用，因为这个是只有在页面销毁之后才能获得数据。这里我选择将base64码传送到服务器，然后服务器生成一个图片路径给我，我再拿着图片路径拼接地址从webview跳转至小程序。
这里会发现一个问题的，在测试的时候，苹果6 7 以及安卓都是没有问题的，到了苹果8之后就会出现问题，排查问题后发现，苹果8不执行html2canvas的回调。这是因为HTML2canvas对于苹果是有一些兼容问题的，这里我提供一个处理过后的JS

写法也要修改为
(window.html2canvas || html2canvas)(document.querySelector("#canvasImg"),{useCORS:true}).then(canvas => { let dataUrl = canvas.toDataURL( 'image/jpeg', 1.0 ) this.saveImgTolocal(dataUrl) });

处理过后的js添加链接描述

在小程序中实现海报制作相关推荐

实战篇-制作微信小程序码宣传海报
一.制作前的说明上一篇文章讲了微信官方提供的动态生成小程序码的一些说明与注意事项. 本篇文章就带大家一起把绘制带参小程序码的宣传海报给画出来以及如何保存已经生成的小程序码,方便下次复用. 注意: 上 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
图灵机器人 mysql_如何在微信小程序中制作图灵机器人？
本教程讲解了如何在微信小程序中制作图灵机器人?操作起来是很简单的,想要学习的朋友们可以跟着小编一起去看一看下文,希望能够帮助到大家. 开发环境及框架后端:国产java极速框架JFinal(超级好用有 ...
Canvas绘图在微信小程序中的应用:生成个性化海报 1
一.Canvas应用的背景(个人理解)及基础语法背景从2012年开始,微信那个时候用户的积累的量已经非常大了,推出公众号,当然大屏智能手机在那个时候也流行,传统的大众媒体逐步消亡,像微信公众号这样 ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...
2022-01-13 微信小程序-简历小项目(一) 小程序中的flex布局,简历首页的制作,箭头区域的制作
文章目录一.准备 1.目标 2.小程序中的flex布局回顾flex布局小程序中要把div换成view标签,别的不变二.制作简历小程序-首页 1.利用小程序提供的独有的API来初始化高和宽小程 ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
在c 语言里如何制作滑动图片大小,[教程]教你在微信小程序中实现手势缩放图片...
在小程序中,image 组件的 mode 有 12 种,其中只有三种是缩放模式.而在这三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片.此模式是保证图片长边完整地显示出来, ...
php 实现雪碧图制作,如何在小程序中使用雪碧图
小这对近样这近样这近样这近样这近样这近样这程序对上传的代码有2M的大小限制,因此一般在小程序中使用icon的时候,要么是用icon-font,要么就是将icon图片上传到cdn再使用,而不会将图片放在 ...

在小程序中实现海报制作

在小程序中实现海报制作相关推荐

最新文章

热门文章