微信小程序 canvas生成海报图片模糊问题
一、制作正常显示海报，生成二倍海报隐藏 代码如下
<!--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>
/*css*/
.btn {
width: 300rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
color: #fff;
font-size: 38rpx;
border-radius: 10rpx;
background: #f9c22e;
}
/* */
.show{
width:750rpx;
height:1000rpx;
background: #fff;
border:1px solid red;
position: relative;
}
.show .card{
display: block;
width:690rpx;
height: 940rpx;
margin:20rpx auto 0;
}
.show .name,.show .header{
position: absolute;
}
.show .name{
width:100%;
text-align: center;
color:red;
top:26rpx;
}
.show .header{
width:100rpx;
height: 100rpx;
border-radius: 100%;
top:500rpx;
left:100rpx;
}
二、canvas 画二倍图 文字居中 实际展示正常海报为375*470 绘制中生成图模糊（文字有锯齿边，图片模糊）。绘制过程中绘制二倍图大小750*940 并保存，则能解决该问题
let x = ctx.width / 2;//canvas宽的一半
//画图
drawCanvas: function () {
let that = this;
let ctx = wx.createCanvasContext('myCanvas');
let ctxW = 750;
let ctxH = 1000;
ctx.width = 750;
ctx.height = 1000;
let x = ctx.width / 2;
// 垂直渐变
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, 1000); //card
ctx.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 // 推进去图片必须是https
ctx.restore(); //恢复之前保存的绘图上下文 继续绘制
/**/
ctx.save();
ctx.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）圆形头像绘制，另一篇文档实际上线项目中手机端头像保存为空，此版本优化。
（4）页面加载完成绘制图形，实际项目中页面加载完成但接口数据不一定返回，所以绘图过程需在接口数据成功返回中调用，避免用户头像为空，绘图为空
（5）优化上一版本大量无用代码，全程使用线上数据代码
（6）canva绘制海报时可添加透明背景。
// 垂直渐变
const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
grd.addColorStop(0, 'transparent');
grd.addColorStop(1, 'transparent');
ctx.setFillStyle(grd);
（7）手机端保存图片 当用户拒绝保存申请时下次点击按钮无法自动调用新的授权申请，点击按钮无反应
此问题已解决网上有各种教程解决方法，当前随笔未更新，只记录图片模糊问题，下个随笔增加拒绝授权至重新授权过程
-------- 注意：鉴于有网友反映该功能无效，声明更新下记录，以下附上全部代码，请测试使用
tap1:该项目为18年开发，请选择低版本库，基础库版本太高会导致报错原因未知，但是报错不影响图片的保存；有知道原因的的兄弟姐妹可以留言回复，谢谢。
若出现以下错误请回调基础库（注该报错依然能保存图片）
tap2：（1）测试1：图片为百度域名下，因此需要忽略域名校验；开发工具可以保存，手机端保存空白。
（2）测试2：使用公司域名且小程序后台已配置dowload合法域名则不需要忽略域名校验（手机端测试需使用合法域名才能进行图片的保存）
tap3：此前百度地址图片没有了，打开为空，找不到图片导致保存为空
完整代码：
<!--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">
<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>
</view>
/*css*/
.btn {
width: 300rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
color: #fff;
font-size: 38rpx;
border-radius: 10rpx;
background: #f9c22e;
}
/* */
.show {
width: 750rpx;
height: 1000rpx;
background: #fff;
border: 1px solid red;
position: relative;
}
.show .card {
display: block;
width: 690rpx;
height: 940rpx;
margin: 20rpx auto 0;
}
.show .name, .show .header {
position: absolute;
}
.show .name {
width: 100%;
text-align: center;
color: red;
top: 26rpx;
}
.show .header {
width: 100rpx;
height: 100rpx;
border-radius: 100%;
top: 100rpx;
left: 100rpx;
}
//index.js
const app = getApp()
Page({
data: {
cardPath: 'https://www.cnblogs.com/skins/mountainink/images/top.jpg',
headPath: 'https://www.cnblogs.com/skins/mountainink/images/top.jpg',
sendName: '姓名姓名姓名'
},
onLoad: function (options) {
var that = this;
that.drawCanvas();
},
/*画图*/
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;
// 垂直渐变
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); //card
ctx.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 // 推进去图片必须是https
ctx.restore(); //恢复之前保存的绘图上下文 继续绘制
/**/
ctx.save();
ctx.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
})
}
})
}
})
},
})
以下appid使用xxxx代码，请使用自己的appid，不是自己的appid没有权限登陆。
{
"description": "项目配置文件。",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": false,
"es6": true,
"enhance": false,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": true,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"useIsolateContext": true,
"useCompilerModule": false,
"userConfirmedUseCompilerModuleSwitch": false
},
"compileType": "miniprogram",
"libVersion": "2.15.0",
"appid": "XXXXXX",
"projectname": "canvas",
"isGameTourist": false,
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
浙公网安备 33010602011771号