微信小程序画布canvas制作海报图片清晰度过低

出现的问题

在制作时出现了在画布上画出来的图片特别糊的问题，原图清晰度是没问题的

定义画布

<canvas type="2d" id="canvas" style="width: 270px;height: 450px;"></canvas>

在onLoad生命周期中声明画布

wx.createSelectorQuery().select('#canvas').fields({node: true,size: true,}).exec(that.init.bind(that))

创建画布

 init(res) {console.log(res)var that = thisconst canvas = res[0].node;const ctx = canvas.getContext('2d');const dpr = wx.getSystemInfoSync().pixelRatio;canvas.width = res[0].width * dpr;canvas.height = res[0].height * dpr;ctx.scale(dpr, dpr)var bg = canvas.createImage();bg.src = 'https://s4.ax1x.com/2021/12/12/oqiBE6.jpg';// 在Canvas画布 添加图片bg.onload = () => {ctx.drawImage(bg, 0, 0, 270, 450);}},

解决方法就是上面创建画布中的这四行，

     const dpr = wx.getSystemInfoSync().pixelRatio;canvas.width = res[0].width * dpr;canvas.height = res[0].height * dpr;ctx.scale(dpr, dpr)

getSystemInfoSync获取用户设备的相关信息；
pixelRatio设备像素比；
将画布的宽高重新定义一下。

微信小程序画布canvas制作海报图片清晰度过低相关推荐

微信小程序利用canvas生成海报-------图片为网络图片
根据我们老总的业务需求,迫不得已,我做了这个canvas绘制的海报,感觉基本上可以解决现在海报所遇到的大部分问题了,献给那些没有做过的小伙伴们,话不多说,先上我做的效果上代码 <style&g ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
微信小程序画布Canvas组件touchend事件不触发处理
一.摘要在微信小程序手势图案锁屏.解锁实现并提供onSuccess等回调一文中,用Canvas画布组件实现了类似Android和Iphone的图案锁屏.解锁功能,除去偶尔卡顿.滑动不连续外,其它都还 ...
微信小程序使用canvas制作拼图动画
效果如上图制作思路: 1. 制作9个由特殊图形拼成的九宫格,包含灰色模糊和彩色高亮:2.生成小拼图并进行一系列变化实现蓄能弹起的动画效果:3.将生成的拼图拼贴在对应的位置上,产生破碎动画特效准备工 ...
微信小程序使用canvas画海报分享图
项目场景: 很多小程序都会有一些分享海报的需求.因为我这边之前一直都是后端直接生成一张图片然后返回了的,我前端直接把路径放上去就可以了.但是,有时候后端没直接生成海报,而是只生成了一个二维码,这时候就 ...
小程序画布Canvas生成海报，分享朋友圈
一使用场景: 小程序内,想要分享海报到朋友圈,附带小程序码,达到转发引流的目的. /*** 用户点击右上角分享*/onShareAppMessage: function() {},shareBook ...
微信小程序保存canvas绘制的图片到本地，拒绝图片授权后继续授权
authorizeSaveImg() { //重新授权相册const that = this;wx.getSetting({success(res) {// 第一,直接调取保存,系统会自动调取授权if ...
微信小程序canvas上传PHP,微信小程序画布 canvas
基础库 1.0.0 开始支持,低版本需做兼容处理. 画布.2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有接口不再维护.相关api:获取 canva ...
怎样用html实现微信九宫格,微信小程序使用canvas实现，图片分割为九宫格，点击图片保存...
let _this Page({/** * 页面的初始数据*/data: { canvasInWH:'',//imgUrl: '', cutGap: 5, //切割间隔 imgW: 0, imgH:0 ...
小程序通过canvas生成海报保存为图片的技巧
小程序通过canvas生成海报保存为图片的技巧最近公司要求在小程序点击分享,要生成一张图片,可以保存在用户相册里,图片里的内容根据后台返回的数据生成,这就涉及到小程序画布的知识了,因为微信文档上,画 ...

微信小程序画布canvas制作海报图片清晰度过低

出现的问题

定义画布

在onLoad生命周期中声明画布

创建画布

微信小程序画布canvas制作海报图片清晰度过低相关推荐

最新文章

热门文章