关于上传图片，使用max-width后导致图片像素改变的问题

Question

html部分代码

 <div class="pic-res">
        <div class="pic">
                <img  id="picture"  src="./img/demo.svg" alt="">
        </div>
</div>

css部分代码

.pic-res .pic #picture {
    max-width: 100%;
    max-height: 100%;
}

上传图片的代码

    var file = fileDOM.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e)
    {
        document.getElementById("picture").src = this.result;
    }

使用canvas获取像素数据

    var img = document.getElementById("picture");
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    var width = img.width;
    var height = img.height;
    canvas.width = width;
    canvas.height = height;
    context.drawImage(img, 0, 0, width, height);
    var imageData = context.getImageData(0, 0, width, height);
    console.log("图片像素数据：");
    console.log(imageData);

这里上传的图片都是黑白像素的二维码，255或0的像素
发现当上传的图片没有超过 .pic 盒子的时候，像素不会改变

但是如果超过.pic 盒子，缩小后，使用canvas获取的像素会有0-255的中间值

求解决~

Answer 1

.pic固定下宽高