html图片导入画布

首先定义一个画布

canvas id="myCanvas"></canvas>

        var canvas = document.getElementById('myCanvas')
        // var btn = document.getElementById('btn')
        var cxt = canvas.getContext("2d")
        var img = new Image() //创建一个image对象 通过构造函数创建 img 实例
       
        img.onload = function () { // 确保图片完整获取到，创建一个异步事件
            console.log(img.width) // 0
            // canvas.width = img.width;
            // canvas.height = img.height;
            cxt.drawImage(img, 0, 0) // 将图片绘制到canvas中
        }
        
        img.src = "../10.jpg" //（给浏览器缓存一张照片）
        console.log(img.width) // 4608

这里有个问题，创建的图片 img 宽度为4608,还没找到原因

关于 画布导出图片 参考：画布导出图片