uniapp怎base64格式图片展示在canvas上

在uniapp中，可以使用uni.getImageInfo方法获取base64格式的图片信息，然后将该信息绘制在canvas上。

具体实现步骤如下：

1. 获取base64格式的图片信息

uni.getImageInfo({
  src: 'data:image/png;base64,iVBORw0KG...',
  success: function (res) {
    console.log(res.width)
    console.log(res.height)
  }
})

2. 在canvas上绘制图片

// 获取canvas上下文
const ctx = uni.createCanvasContext('myCanvas')

// 绘制图片
ctx.drawImage('data:image/png;base64,iVBORw0KG...', 0, 0, res.width, res.height)

// 将绘制结果显示在页面上
ctx.draw()

这样就可以将base64格式的图片展示在canvas上了。需要注意的是，如果要在canvas上绘制的图片过大，可能会导致canvas绘制失败，需要对图片进行压缩或裁剪。

相关问题

uniapp怎么base64格式图片显示在canvas上

在uniapp中，可以使用uni.getImageInfo获取图片信息，然后将图片转换成base64格式，在canvas中显示。下面是一个示例代码：

// 获取图片信息
uni.getImageInfo({
  src: 'https://example.com/image.jpg',
  success: function (image) {
    // 将图片转换成base64格式
    uni.getFileSystemManager().readFile({
      filePath: image.path,
      encoding: 'base64',
      success: function (base64) {
        // 将base64格式的图片绘制到canvas上
        const ctx = uni.createCanvasContext('canvas');
        const imgData = 'data:image/png;base64,' + base64.data;
        ctx.drawImage(imgData, 0, 0, image.width, image.height);
        ctx.draw();
      }
    });
  }
});

需要注意的是，canvas绘制图片的时候需要等待图片加载完成后再绘制，所以需要在getImageInfo的回调函数中进行base64转换和canvas绘制的操作。

uniapp怎么base64格式转换为图片显示在canvas上

在uniapp中，可以通过以下步骤将base64格式的图片转换为图片显示在canvas上：

1. 使用`uni.getImageInfo`方法获取图片信息，包括宽度和高度。

2. 创建一个canvas对象，并获取其绘图上下文。例如：

const ctx = uni.createCanvasContext('myCanvas', this);

3. 使用`ctx.drawImage`方法将base64格式的图片绘制在canvas上。例如：

ctx.drawImage(base64Img, 0, 0, width, height);

其中，`base64Img`是base64格式的图片，`width`和`height`分别是图片的宽度和高度。

4. 调用`ctx.draw`方法将canvas绘制出来。例如：

ctx.draw(false, () => {
  uni.canvasToTempFilePath({
    canvasId: 'myCanvas',
    success: (res) => {
      // res.tempFilePath是canvas生成的图片路径
    }
  }, this)
});

这样，就可以将base64格式的图片转换为图片显示在canvas上了。