uniapp canvas怎么不用choose展示本地图片

你可以使用uniapp的`getImageInfo` API获取本地图片的信息，然后使用`canvas`的`drawImage`方法将图片绘制到画布上，从而达到不使用`choose`展示本地图片的目的。以下是一个示例代码：

<template>
  <view>
    <canvas canvas-id="myCanvas"></canvas>
  </view>
</template>

<script>
export default {
  onReady() {
    uni.getImageInfo({
      src: '本地图片路径',
      success: (res) => {
        const ctx = uni.createCanvasContext('myCanvas', this);
        ctx.drawImage(res.path, 0, 0);
        ctx.draw();
      }
    })
  }
}
</script>

其中，`canvas-id`是canvas组件的唯一标识符，`createCanvasContext`方法可以获取到canvas的绘图上下文。在`drawImage`方法中，第一个参数是图片的路径，第二个和第三个参数是图片在canvas上的位置。最后调用`draw`方法将画布渲染出来。

相关问题

UniApp 用canvas生成图片保存本地

UniApp 中可以使用 Canvas 组件来生成图片，并使用 uni.canvasToTempFilePath 接口将 Canvas 画布内容转为临时文件路径，最后使用 uni.saveImageToPhotosAlbum 接口将临时文件路径保存到本地相册。

以下是一个示例代码：

<template>
  <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  <button @tap="saveImage">保存图片</button>
</template>

<script>
export default {
  methods: {
    saveImage() {
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: '保存成功'
              })
            },
            fail: () => {
              uni.showToast({
                title: '保存失败',
                icon: 'none'
              })
            }
          })
        }
      })
    }
  },
  mounted() {
    const ctx = uni.createCanvasContext('myCanvas')
    ctx.fillStyle = '#f00'
    ctx.fillRect(0, 0, 300, 300)
    ctx.draw()
  }
}
</script>

在上述代码中，我们首先在 template 中定义了一个 canvas 组件和一个按钮。在 mounted 钩子函数中，我们获取了 CanvasRenderingContext2D 对象并使用 fillRect 方法绘制了一个红色的矩形。在 saveImage 方法中，我们使用 uni.canvasToTempFilePath 接口将 Canvas 画布内容转为临时文件路径，并使用 uni.saveImageToPhotosAlbum 接口将临时文件路径保存到本地相册。最后，我们在保存成功或失败时使用 uni.showToast 接口提示用户。

uniapp canvas图片跨域

在uniapp中，如果想要在canvas中绘制跨域图片，可以通过将图片转换为base64格式然后使用context.drawImage()方法来实现。首先，你需要创建一个画布并设置其样式，例如：

<canvas style="background-color: #fff; border: 1px solid #d0d0d0; width: 100vw; height: 100vh; position: absolute; left: 100%;" canvas-id="myCanvas" id="myCanvas"></canvas>

然后，你可以将图片转换为base64格式，并在canvas中使用context.drawImage()方法将其绘制出来。这样就可以成功在canvas中使用跨域图片了。如果遇到H5本地图片画布无法成功的情况，你可以尝试使用小程序来实现。希望对你有帮助！