【微信小程序】canvas生成分享图片海报模糊解决方法
利用展示(drawImage)和保存(canvasToTempFilePath)设置尺寸不同，保存设置正常图片像素的大小
一、制作正常页面显示海报，实际canvas画布生成二倍图隐藏，下载时缩小显示即可解决模糊问题。二倍海报图屏幕仅能展示一半。保存图为750*940，实际canvas大小应为375px*470px ，此处二倍画图设置canvas大小为750px*940px
代码如下：
<!--index.wxml-->
<view class="container"><view class="show"><image src="{{cardPath}}" alt="" class="card"></image><text class="name">{{sendName}}</text><image src="{{headPath}}" class="header"></image></view><view class="btn" bindtap="saveImage">保存图片</view><view class="canvasBox" style="width:0;height:0;overflow: hidden;opacity:0;position:absolute;left:-750px;top:0;"><canvas canvas-id='myCanvas' style='width:750px;height:1000px;'></canvas></view>
</view>二、canvas绘图过程：文字居中显示时设置let x = ctx.width/2 画布宽度一半，设置文字时距离左边像素为x，既为中心位置
/*画图*/drawCanvas: function () {let that = this;let ctx = wx.createCanvasContext('myCanvas');let ctxW = 750;let ctxH =940;ctx.width = 750;ctx.height =940;let x = ctx.width / 2;//canvas宽的一半// 垂直渐变const grd = ctx.createLinearGradient(0, 0, 0, ctxH);grd.addColorStop(0, '#ffffff');grd.addColorStop(1, '#ffffff');ctx.setFillStyle(grd);ctx.fillRect(0, 0, ctxW, ctxH);wx.getImageInfo({src: that.data.cardPath,success: (res) => {ctx.drawImage(res.path, 0, 0, 750,940); //cardctx.setFontSize(32) //字体大小ctx.setFillStyle('red') //字体颜色ctx.textAlign = "center"; //文字居中ctx.fillText(that.data.sendName, x, 34)ctx.stroke();wx.getImageInfo({src: that.data.headPath,success: (res) => {ctx.save();ctx.beginPath(); //开始绘制ctx.arc(150,358,50, 0, 2 * Math.PI)ctx.fill()ctx.clip(); //剪切ctx.drawImage(res.path,100, 308, 100, 100); //userHeader // 推进去图片必须是httpsctx.restore(); //恢复之前保存的绘图上下文 继续绘制/**/ ctx.save();ctx.draw();}})}})},三、wx.canvasToTempFilePath(Object object, Object this)下载保存图片(重点在这里，设置正常宽高)
把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
参数
/* 保存图片 */saveImage: function (e) {wx.canvasToTempFilePath({x: 0, //指定的画布区域的左上角横坐标 y: 0, //指定的画布区域的左上角纵坐标 width: 750, //指定的画布区域的宽度height: 940, //指定的画布区域的高度destWidth: 750, //输出的图片的宽度 destHeight: 940, //输出的图片的高度canvasId: 'myCanvas',fileType: 'jpg', //图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。quality: 1,success: function (res) {wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(result) {wx.showToast({title: '图片保存成功',icon: 'success',duration: 2000})}})}})},tips：该文档解决两个问题
（1）文字居中显示
（2）生成图模糊
（3）圆形头像绘制，另一篇文档实际上线项目中手机端头像保存为空，此版本优化。
（6）canva绘制海报时可添加透明背景。
// 垂直渐变
const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
grd.addColorStop(0, 'transparent');
grd.addColorStop(1, 'transparent');
ctx.setFillStyle(grd);【微信小程序】canvas生成分享图片海报模糊解决方法相关推荐
- 【愚公系列】2022年08月 微信小程序-view生成分享图片
文章目录 前言 一.view生成分享图片 1.组件的封装 2.组件的使用 3.效果 4.第三方工具的使用 前言 微信小程序并不支持view直接转绘到画布上,想要实现海报功能必须通过以下4个步骤: 通过 ...
- 微信小程序canvas生成头像图片空白问题
官方关于 wx.canvasToTempFilePath 的说明: 把当前画布指定区域的内容导出生成指定大小的图片.在 draw() 回调里调用该方法才能保证图片导出成功. https://devel ...
- mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报 效果 贴代码 html <template><!--index.wxml--><view class="poster ...
- 微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得 为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
- 微信小程序实现生成分享海报案例
一.引入插件painter (1)克隆地址:https://gitcode.net/mirrors/Kujiale-Mobile/Painter (2)下载的painter放到小程序的componen ...
- 微信小程序 canvas描绘文字图片 生成图片并保存到本地
在实现这个功能时,遇到以下的问题: 1. canvas绘制文字的换行问题: 如果文字的长度大于你所定的宽度的话,文字会超出你所定宽度: 小程序的CanvasContext.fillText有一个max ...
- 微信小程序朋友圈分享图片生成方案实现
在小程序界里,生成图片分享到朋友圈这个功能,是如此得光芒耀眼,以至于各个小程序都趋之若鹜地前来跪倒在她的石榴裙下.不幸的是,微信爸爸并没有提供给我们很好很便捷的相关工具:恰恰相反,屏幕截屏的功能被残忍 ...
- uniapp微信小程序canvas生成简单海报并下载
今天项目接到个任务,就是手写canvas海报,并能下载图片.百度了很多海报组件,都不尽人意.萌生了自己手写海报的想法. 话不多说先贴文档 uni-app官网 其实该文档和微信小程序类似 最终效果,微信 ...
- 微信小程序朋友圈分享图片、海报
在小程序界里,生成图片分享到朋友圈这个功能,是如此得光芒耀眼,以至于各个小程序都趋之若鹜地前来跪倒在她的石榴裙下.不幸的是,微信爸爸并没有提供给我们很好很便捷的相关工具:恰恰相反,屏幕截屏的功能被残忍 ...
- 微信小程序自动生成打卡海报
1 背景 最近在做一款背单词的小程序,用户在学习完成有对外展示的需求.计划小程序可以自动生成打卡海报,用户可以将海报保存,将保存的图片发布至朋友圈.除此之外,为推广小程序,还需要在海报中加入小程序的二 ...
最新文章
- android glide的历史,Android 图片加载的那些事：为什么你的Glide 缓存没有起作用？...
- 《Python Cookbook 3rd》笔记（3.6）：复数的数学运算
- ［翻译］PHP中define()和const定义常量的区别
- 最近录制了一些视频，搭建和测试了一下视频平台
- 荣耀v10玩flash游戏_沫子玩王者荣耀被打哭？直言这个游戏比吃鸡还难玩
- WLAN802.11n新技术详解
- 信息系统综合知识六 标准化与知识产权
- 最好用图像处理库CxImage入门
- YOLO v2详细解读
- 一家中国公司把城市变成了AI版《清明上河图》
- 迅为4412开发平台Zigbee模块在物联网智能家居中的应用
- 麦克劳林公式怎么记忆_泰勒展开的公式怎么记忆？
- python海龟交易源码,福利到！用 Python 实现海龟交易系统
- windows下DxDiag查看笔记本电脑主板型号信息
- Linu中的网络配置(设置ip，网关（路由功能），dns)，虚拟机上网
- Hystrix熔断器
- 27岁，今年研究生上岸，有什么忠告可以给我的？
- kubectl describe命令详解
- 苹果手机有便签吗?苹果手机便签下载
- FDFS_Ubuntu部署fdfs测试上传文件不成功