解决 uni-app 使用 Painter 生成商品海报真机模糊问题

每写一篇文章都需要前言进行背景的阐述，方便自己和其他遇到同样问题的朋友快速定位是否为同一类问题。

在开发 uni-app 的过程中分享商品时需要生成对应的商品海报图，个人也试了几款社区提供的插件，坑也是不少。但是仍然满足不了复杂的定制场景。

好在社区的大佬多，找到一块个人认为非常好，坑相对较少的插件。

Painter

地址已经贴上，需要的老铁可以去 Github下载。

下面说一下遇到的坑。

首先我们需要把 Painter 微信小程序插件下载下来，放到项目对应目录下，我这里是放在了 wxcomponents/painter 目录下。

你需要在哪个页面中使用这个插件，在 page.json 中将其加载进来。

然后我们就可以在组件中使用。

可能有朋友会问，palette 是什么作用。当然，它们官方文档也写的明明白白的，palette 字段作为画图数据的数据源，图案数据以 json 形式存在。说白一点就是，你生成的这个海报长什么样子，是需要你用 json 来描述。比如:

我们需要将这些 json 数据传递给 painter 组件，它通过 canvans 进行画图。内部画完之后，会生成一个图片地址通过 @imgOk 自定义事件通知你接受。然后我们只需要把这个图片展示出来，如果需要用户保存这个图片海报，我们可以在图片下面提供几个按钮，让用户点击下载。

那么问题是这么多 json 数据，我要特么一行一行写和调试吗?

当然不是，Painter 官方给你提供了在线海报生成工具。超级好使

在线地址为 https://lingxiaoyi.github.io/painter-custom-poster/

你自己画完之后，将代码复制一份。

所以 palette 属性就是用于接收这些 json 数据。

还有一点需要提一下，我们需要将 painter 组件渲染出的元素移出屏幕之外，我们只需要它给我们返回的图片路径，然后我们自己渲染这个图片。

开始运行，成功生成了!

但是发现一个问题，这个海报生成的在真机上预览很模糊，模糊的你都不肯接受，这究竟是什么原因呢。

Painter 内部生成图片时，调用的是微信的 canvasToTempFilePath API。很大关系是和这个有关系，也就是和我们在组件上使用的 widthPixels 属性有关。

widthPixels 这个属性究竟是干嘛的? 起到了什么作用呢?

下面是 Painter 内部通过调用 wx.canvasToTempFilePath 生成图片的代码，发现内部用到了 destWidth 属性，也就是我们组件上使用的 widthPixels，目前我们使用的值是 375

微信文档关于 canvasToTempFilePath 属性描述

微信官方文档属性说明，表示输出的图片宽度。What?

难道如果将 widthPixels 指定为0，图片的宽度就是 0 了吗?
当然不是:

官方解释为: 存储图片的时候是按物理像素存的，canvas 用的是逻辑像素，所以要做一下转换。

如果导出的图片是按照原始尺寸的话，就会出现很模糊的现象，因为屏幕密度的问题。所以需要将图片的宽度在 canvans 生成图片下进行 2 - 3 倍的放大。

然后生成的图片在手机上就会显真，不会出现模糊现象。

所以将 widthPixels="2080" 设置成了我画布的好几倍，然后生成的图片渲染出来在真机上调试不会出现模糊问题。

此篇文章会一直更新，如果还遇到相关的坑，会继续在这篇文档内总结。

解决 uni-app 使用 Painter 生成商品海报真机模糊问题相关推荐

uniapp 生成商品海报并分享保存
uniapp 生成商品海报并分享保存 <template><view class="center"><view class="icon-it ...
APP自动化测试系列之adb连接真机和模拟器
VOL 160 21 2020-09 今天距2021年101天这是ITester软件测试小栈第160次推文点击上方蓝字"ITester软件测试小栈"关注我,每周一.三.五早上 ...
uniapp点击生成商品海报、下载海报、分享海报
开发过程中需要根据商品信息生成海报,供用户下载海报 .分享海报等效果: 1.首先搭建页面结构: <view class="share flex& ...
uni-app生成分享图片（使用 Painter 生成分享海报）
Painter 支持文本.图片.矩形.qrcode 类型的 view 绘制. 如何使用 1.引入代码.注意:存放目录 uni-app根据不同平台插件存放目录不同. git clone https: ...
vue移动端，使用canvas生成商品海报及自定义海报
1.使用 vue-canvas-poster npm i vue-canvas-poster --save 2.在main.js入口文件中引入 import VueCanvasPoster from ...
解决：harmony鸿蒙设备获取udid（真机）
在鸿蒙应用开发的过程中,会遇到设备没有添加到AppGallery的问题,这个时候需要找到设备的udid并添加到AppGallery上方法一: Failure[INSTALL_FAILED_APP_S ...
解决：微信小程序只有调试或真机打开调试模式时可以访问网络，手机预览不能访问网络
在微信小程序管理后台加入服务器域名,稍等一会再次访问即可欢迎大家指正
uniapp生成canvas商品海报
uniapp生成canvas商品海报之前做一个uniapp开发的微信小程序需要生成商品海报,在网上学习后完成,记录一下. 主要使用了canvas,uniapp官网链接:canvas使用方法自定义生 ...
【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况
微信小程序,在使用canvas画海报的时候,会导致个别用户无法生成的情况,你们可以尝试把绘画某些块的代码注释掉再进行扫码调试,我前几天就遇到个别客户无法生成商品海报的情况,刚开始是以为上一个同事留的坑 ...

解决 uni-app 使用 Painter 生成商品海报真机模糊问题

解决 uni-app 使用 Painter 生成商品海报真机模糊问题相关推荐

最新文章

热门文章