uniapp 入门实战 13：解决 canvasToTempFilePath 生成图片模糊问题

情境

• 对比效果

  为啥看不清我女朋友… (开玩笑)

• 代码

  
  ...
  const expWidth = this.eW || width;
  const expHeight = this.eH || height;
  ...
  const commonParams = {
    x: x,
    y: y,
    width: width,
    height: height,
    destWidth: expWidth,
    destHeight: expHeight,
    fileType: this.fType,
    quality: Number(this.qlty),
   };
  
  uni.canvasToTempFilePath(
    Object.assign(commonParams, {
     canvasId: "avatar-canvas",
     success: (r) => {
      ...
     },
     fail: (res) => {
      triggerFail(res.errMsg);
     },
     complete: () => {
      triggerFinish();
     },
    }),
    this
   );

原因

截图的尺寸宽高固定值，而没有根据设备的像素比来动态设置，自然在高分辨率下截图出一个小尺寸图片，然后将其拉伸到大一点的尺寸显示就变得模糊了

解决方法

const commonParams = {
  x: x,
  y: y,
  width: width,
  height: height,
  destWidth: expWidth,
  destHeight: expHeight,
  fileType: this.fType,
  quality: Number(this.qlty),
 };

const sysInfo = uni.getSystemInfoSync();
this.pixelRatio = sysInfo.pixelRatio;

//说明：根据像素比来截去图片,避免高分辨率查看图片模块的情况
const expWidth = (this.eW || width) * this.pixelRatio;
const expHeight = (this.eH || height) * this.pixelRatio;

uni.canvasToTempFilePath(
  Object.assign(commonParams, {
   canvasId: "avatar-canvas",
   success: (r) => {
    ...
   },
   fail: (res) => {
    triggerFail(res.errMsg);
   },
   complete: () => {
    triggerFinish();
   },
  }),
  this
 );

参考文献

• https://stackoverflow.com/questions/45087054/br-is-not-friendly-with-the-flexbox