关于uniapp的canvas示例只能在onReady中才能生效,uniapp,微信小程序canvas详解

一、uniapp的示例不仅只能在onReady中生效，还要求canvas不能是子组件，无法嵌套。

二、如果需要通过操作来动态渲染canvas，或者封装子组件

<canvas style="width: 375px;height: 375px;" type="2d" id="myCanvas" canvas-id="myCanvas"></canvas>

下面是uniapp的示例，更改后可使用

// 以下wx. api可换成uni.
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res) => {
    const canvas = res[0].node
    const ctx = canvas.getContext('2d')
    const dpr = wx.getSystemInfoSync().pixelRatio
    canvas.width = res[0].width * dpr
    canvas.height = res[0].height * dpr
    // ctx.setStrokeStyle("#00ff00")
    ctx.strokeStyle = "#00ff00"
	// ctx.setLineWidth(5)
    ctx.lineWidth = 5
	ctx.rect(0, 0, 200, 200)
	ctx.stroke()
	// ctx.setStrokeStyle("#ff0000")
    ctx.strokeStyle = "#ff0000"
	// ctx.setLineWidth(2)
    ctx.lineWidth = 5
	ctx.moveTo(160, 100)
	ctx.arc(100, 100, 60, 0, 2 * Math.PI, true)
	ctx.moveTo(140, 100)
	ctx.arc(100, 100, 40, 0, Math.PI, false)
	ctx.moveTo(85, 80)
	ctx.arc(80, 80, 5, 0, 2 * Math.PI, true)
	ctx.moveTo(125, 80)
	ctx.arc(120, 80, 5, 0, 2 * Math.PI, true)
	ctx.stroke()
	// ctx.draw() draw() undefined
})

三、绘制图片

1.如果需要绘制本地图片

// canvas实例，ctx上下文，接上图
const image = canvas.createImage()
image.src = 'xxxxxxx' // 本地图片资源
image.onload = function() {
    // drawImage() image 图片文件资源 x,y图片在canvas中的位置
    ctx.drawImage(image,x,y,imageWidth,imageHeight)
}

2.如果绘制网络图片

const image = canvas.createImage()
image.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F43%2Fd5%2F52%2F43d5522f61c57136ec4d34d74fd06a7d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671072088&t=371457c2794becc485defded9216818d'
                    
const window = await uni.getSystemInfo()
image.onload = function(res) {
    // 放在onload中获取是因为先调用getImageInfo，会导致onload不执行 或者获取res中的path[0]，其中有图片数据
    const imageInfo = await uni.getImageInfo({src: image.src})
    // 获取原图片宽高，计算比例，等比例绘制在canvas中
    let ratio = imageInfo.width / imageInfo.height
    let imageWidth = parseInt(window.windowWidth * window.pixelRatio)
    let imageHeiht = parseInt(imageWidth / ratio)
    // drawImage() image 图片文件资源 x,y图片在canvas中的位置
    ctx.drawImage(image,0,200,imageWidth,imageHeiht)      
}

3.绘制本地图片也可以使用上图中的方法，等比例绘制图片。下图为网络图片绘制

四、输出canvas为图片

image.onload = async function(res) {
    // 本地图片与网络图片都可以使用该方法获取
    const imageInfo = res.path[0]
    // getImageInfo仅支持网络图片
    // const imageInfo = await uni.getImageInfo({src: image.src})
    // 获取原图片宽高，计算比例，等比例绘制在canvas中
    let ratio = imageInfo.width / imageInfo.height
    let imageWidth = parseInt(window.windowWidth * window.pixelRatio)
    let imageHeiht = parseInt(imageWidth / ratio)
    // drawImage() image 图片文件资源 x,y图片在canvas中的位置
    ctx.drawImage(image,0,200,imageWidth,imageHeiht)
    // ctx.draw() draw() undefined
    console.log(ctx)
    uni.canvasToTempFilePath({
        // 当type为2d时，，传入canvas实例，否则传入canvasId
        canvas: canvas,
        width: imageWidth,
        height: imageWidth,
        destWidth: imageWidth,
        destHeight: imageWidth,
        success: function(res) {
            // 在H5平台下，tempFilePath 为 base64
            console.log(res.tempFilePath,'---')
        },
        fail(err) {
            console.log(err,'err')
        }
    },this)
}

输出结果

此时得到的是本地路径，如果需要上传到后台并保存路径，需要先使用uploadFile上传，生成网络路径，再保存。

五、注意事项

如果本文能帮助到您，请给个关注，点个赞再走吧，后续我会开发canvas组件，包括旋转，拖拽，缩放等功能哦，组件开发完成后会发布出来，需要的朋友可以关注私信我。

如果发现本文中存在错误，或者存在报错信息，可以在评论区指出。