首页 > 编程语言 >在线直播系统源码,canvas 生成图片模糊

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

时间:2022-09-22 14:23:51浏览次数:45  
标签:canvas devicePixelRatio 像素 width 直播 height 源码 图片

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

关于canvas的一些基础知识

 

canvas绘制的是位图

canvas的width和height属性

 

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

图片模糊原因:

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

 

解决方法:

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

 

uniapp 解决问题实例:

 

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

 

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

 

标签:canvas,devicePixelRatio,像素,width,直播,height,源码,图片
From: https://www.cnblogs.com/yunbaomengnan/p/16719094.html

相关文章