首先定义一个画布

canvas id="myCanvas">

    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,还没找到原因

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