在线直播系统源码，canvas 生成图片模糊

在线直播系统源码，canvas 生成图片模糊

关于canvas的一些基础知识

 

canvas绘制的是位图

canvas的width和height属性

 

1

canvas的width和height属性与style的width,height 不同。应注意区分：<br><canvas width="600" height="300" style="width: 300px; height: 150px"></canvas><br>style中的width和height分别代表canvas这个元素在界面上所占据的宽高，即样式上的宽高<br>attribute中的width和height则代表canvas实际像素的宽高<br>也就是就是1个逻辑像素实际上由2个canvas像素填充。<br>例如: 示例一： canvas width="300" height="150" style="width: 300px; height: 150px" // 红色<br>示例二：canvas width="600" height="300" style="width: 300px; height: 150px" // 蓝色<br>也就项上述的图片展示一致  红色为普通屏  蓝色为高清屏；

​

图片模糊原因：

canvas 绘制的图形是位图，即栅格图像或点阵图像，当将它渲染到高清屏时，会被放大，每个像素点会用 devicePixelRatio 的平方个物理像素点来渲染，因此图片会变得模糊。

 

解决方法：

放大 devicePixelRatio 倍 canvas 的宽高，然后再用css缩小回到你想要的理想像素

 

uniapp 解决问题实例：

 

1

1、 canvas 节点<br><!-- 避免图片失真，获取设备像素比设置画布大小，css样式在设置内容块宽高 --><br><canvas canvas-id="mycanvas" :style="'width: '+popWidth*devicePixelRatio+'px;height: '+canvasHeight*devicePixelRatio+'px;transform:scale('+1/devicePixelRatio+'); transform-origin: 0px 0px;position: fixed;opacity: 0;top: -'+canvasHeight+100+'px;'"></canvas><br>2、获取设备像素比<br>uni.getSystemInfo({<br>    success(res) {<br>    that.popWidth = res.windowWidth;<br>    // 设备像素比大于1<br>    if (res.devicePixelRatio > 1) {<br>    that.devicePixelRatio = res.devicePixelRatio;<br>    }<br>    }<br>});<br>3、绘制<br>let ctx = uni.createCanvasContext('mycanvas', this);  // 创建canvas对象<br>ctx.setFillStyle('#fff');<br>// 避免二维码失真，导致识别二维码失败；<br>// 获取设置像素比。绘制设备像素比相符的画布内容，在csstranform设置节点样式缩放，transform-origin基准设置为0，0；<br>// 这样获取到的画布图片内容就不会失真了。<br>ctx.fillRect(0, 0, that.popWidth*that.devicePixelRatio, that.canvasHeight*that.devicePixelRatio); // that.canvasHeight 为你设计图的画布高度；

 

以上就是 在线直播系统源码，canvas 生成图片模糊，更多内容欢迎关注之后的文章