# 在小程序中使用的 Canvas 2D API 绘制本地图片

- Link: https://www.ixiqin.com/2022/07/29/in-a-small-program-used-in-the-canvas-api-to-draw-2-d-local-pictures/
- Published: 2022-07-29T06:00:00+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2022/07/29/in-a-small-program-used-in-the-canvas-api-to-draw-2-d-local-pictures/#)

 * [页面布局](https://www.ixiqin.com/2022/07/29/in-a-small-program-used-in-the-canvas-api-to-draw-2-d-local-pictures/#%e9%a1%b5%e9%9d%a2%e5%b8%83%e5%b1%80)
 * [页面逻辑](https://www.ixiqin.com/2022/07/29/in-a-small-program-used-in-the-canvas-api-to-draw-2-d-local-pictures/#%e9%a1%b5%e9%9d%a2%e9%80%bb%e8%be%91)
 * [参考文档](https://www.ixiqin.com/2022/07/29/in-a-small-program-used-in-the-canvas-api-to-draw-2-d-local-pictures/#%e5%8f%82%e8%80%83%e6%96%87%e6%a1%a3)

小程序自 2.9.0 起，不再推荐使用其自己封装的 Canvas Context，而是更加推荐大家使用
标准的 [Canvas 2D API ](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)
来完成相关操作。因此，对于开发者来说，需要将过去的 Canvas API 调整为新的标准的 API。

刚好我最近也实现了类似的功能，将这部分逻辑分享给大家。

## 页面布局

    ```shcb-line-numbers
    <view>
      <view><button bindtap="chooseImage">选择图片</button></view>
      <view><canvas id="myCanvas"  type="2d" style="background-color:gray;width: 100%;margin-top: 100rpx;"></canvas></view>
    </view>
    Code language: HTML, XML (xml)
    ```

## 页面逻辑

    ```javascript
    Page({
       chooseImage(){
        // 创建一个 Query
        const query = wx.createSelectorQuery()
        // 选中 Canvas 对象
        query.select('#myCanvas')
          .fields({
            node: true,
            size: true // 提取 Node 信息
          })
          .exec((res) => {

            // 获取到 Canvas Node
            const canvas = res[0].node

            // 获取到 Context
            const ctx = canvas.getContext('2d')
            wx.chooseMedia({
              count: 1,
              success: function (res) {
                // 提取图片的基本信息
                wx.getImageInfo({
                  src: res.tempFiles[0].tempFilePath,
                  success: imgInfo => {
                    // 使用 canvas.createImage 来创建一个图片
                    const img = canvas.createImage()
                    img.src = imgInfo.path
                    img.onload = () => {
                      // 将图片画在画布上
                      ctx.drawImage(img, 0, 0, imgInfo.width, imgInfo.height)
                    }
                  }
                })
              }
            })
          })
       }
    })
    Code language: JavaScript (javascript)
    ```

## 参考文档

 * [wx.selectQuery](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html)
 * [NodeRef.Fields](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.fields.html)
 * [Using Images](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images)