宣告：我是在vue專案下寫的；

1.用canvas畫圖，但是圖片有時候出現有時候不出現的；

附上原始碼：

     <input type="file" accept="image/*" @change="showImage"/>

showImage(e) {
            let vm = this;
            let reader = null;
            if(window.FileReader) {
                reader = new FileReader;
            } else {
                alert(
 
'瀏覽器不支援預覽功能');
            }
            let imageFiles = e.target.files[0];
            reader.readAsDataURL(imageFiles);
            reader.onload = function(event) { //reader.onload之後直接將圖片寫入    canvas,會出現圖片有時候會沒有顯示
                let img = new Image();
                img.src = event.target.result;
                let canvas 
 
= document.getElementById('canvas');
                let ctx = canvas.getContext('2d');
                ctx.beginPath();
                ctx.drawImage(img,0,0,300,300);
                ctx.closePath();
            }
        },

修改方法為

showImage(e) {
            let vm = this;
            let reader = null
 
;
            if(window.FileReader) {
                reader = new FileReader;
            } else {
                alert('瀏覽器不支援預覽功能');
            }
            let imageFiles = e.target.files[0];
            reader.readAsDataURL(imageFiles);

            reader.onload = function(event) {
                let img = new Image();
                img.src = event.target.result;
                img.onload = function() { //等圖片讀取完成之後再寫入canvas
                    let canvas = document.getElementById('canvas');
                    let ctx = canvas.getContext('2d');
                    ctx.beginPath();
                    ctx.drawImage(img,0,0,300,300);
                    ctx.closePath();
                }
            }
        },

2.圖片等比例展示

showImage(e) {
            let vm = this;
            let reader = null;
            if(window.FileReader) {
                reader = new FileReader;
            } else {
                alert('瀏覽器不支援預覽功能');
            }
            let imageFiles = e.target.files[0];
            reader.readAsDataURL(imageFiles);
            reader.onload = function(event) {
                let img = new Image();
                img.src = event.target.result;
                img.onload = function() { //等圖片讀取完成之後再寫入canvas
                    let imgWidth = img.width/2;
                    let imgHeight = img.height/2;
                    let canvas = document.getElementById('canvas');
                    let scale = 1;
                    let tt = 400;
                    if(imgHeight > tt || imgWidth >tt) {
                        if(imgWidth > imgHeight) {
                            scale = tt/imgWidth/2;
                        }else {
                            scale = tt/imgHeight/2;
                        }
                    }
                    canvas.height = imgHeight*scale;
                    canvas.width = imgWidth*scale;
                    let ctx = canvas.getContext('2d');
                    ctx.beginPath();
                    ctx.drawImage(img,0,0,canvas.width,canvas.height);
                    ctx.closePath();
                }
            }
        },