• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序 canvas生成海报图片模糊问题

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、制作正常显示海报,生成二倍海报隐藏 代码如下

<!--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": []
		}
	}
}

  

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
[技术博客]海报图片生成——小程序canvas画布发布时间:2022-07-18
下一篇:
微信小程序 canvas 绘图问题总结发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap