vueベースのcanvas図面をローカルにダウンロード

canvas図面の基本手順
html canvasラベルキャンバスを作成する

canvasの幅は必ず書きます.彼がデフォルトの幅300*150を設定しないと、絵を描くときに変形します.
js canvasキャンバスにデータを描く

let myCanvas = this.$refs.myCanvas
//     
let Cwidth = 500
let CHeight = 500
//             
var ctx = myCanvas.getContext('2d')
//      ，canvas         ，            
//             ，        100%   
//       -           
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, Cwidth, CHeight);

//         rgba
ctx.fillStyle = 'rgba(0,0,0,0.9)'
//         (x, y, width, height)
ctx.strokeRect(50, 100, 100, 100)

//          
ctx.fillStyle = '#333'

//     -  ，   -   
ctx.font = '16px Arial'
ctx.fillText('       ', 50, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(200, 30, 80, 50);

//        
//           
//                
// let imgObj = new Image()
// imgObj.src = 'http://img4.imgtn.bdimg.com/it/u=3704809141,1787261659&fm=11&gp=0.jpg'
// let imgUrl = await this.imgOnload(imgObj)
// ctx.drawImage(imgUrl, 250, 200, 150, 150)

//          ，，         ，         ，         
//        

//     （     ）
let imageUrl = myCanvas.toDataURL("image/png", 0.5);

// base64         
//          ，       ，    ，      ，    a      
//        ，  base64     ，    
this.downloadFile(imageUrl, '1.png')

//     -   -   
imgOnload(img) {
    return new Promise(resolve => {
        img.onload = function () {
	        resolve(this)
        }
    })
}

//         
downloadFile(data, filename) {
    //             URI        
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
    //       
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false,         false, false, 0, null);
    save_link.dispatchEvent(event);
},

これで画像を生成できますが、絵のcanvasと生成された画像が少しぼやけてしまい、次の文章で解決策を書く場合もあります