vue+canvas踩坑之旅

               let img=new Image();
               if(img.complete) {  
                   console.log('dd');  
               }  

               img.src="http://localhost:8888/static/img/logo11.6d2b322.png"

               img.onload = function() {
                    console.log('ff')  
               }
            

首先，一張圖片在定義 img.src="http://localhost:8888/static/img/logo11.6d2b322.png"的時候，img就已經結束了它的渲染，那么自然而然不會進到下面的onload的函數。

好的，現在把圖片往下調就可以

let img=new Image();
               if(img.complete) {  
                   console.log('dd');  
               }  
            
               img.onload = function() {
                    console.log('ff')  
               }

   img.src="http://localhost:8888/static/img/logo11.6d2b322.png"

那么一次完整的vue+canvas繪制圖片的過程就如下所示：

              let cans=document.getElementById("myCanvas");
              let ctx=cans.getContext("2d");
              let img=new Image();

               img.onload = function(){
           
                ctx.drawImage(img,50,50,100,100);
                ctx.strokeStyle = "#0695FF";        //定義矩形的顏色
                ctx.strokeRect(50,50,100,100);
                ctx.strokeRect(50,170,100,100);
              };
                img.src="http://localhost:8888/static/img/logo11.6d2b322.png"
                ctx.drawImage(img, 10, 10);   

 但是這個畢竟還是太撲街了，最后成功的demo如下

<template>
    <div>
        <h2>
            TestCanvas
        </h2>

        <img
            v-show="false"
            ref="myImg"
            src="../assets/logo.png"
        >
        <canvas
            ref="myCanvas"
            width="200"
            height="100"
            style="border:1px solid #c3c3c3;"
        >
            您的瀏覽器不支持 HTML5 canvas 標簽。
        </canvas>
        <button
            @click="downloadCanvas">
            下載
        </button>
    </div>
</template>

<script>
export default {
    name: "TestCanvas" ,
    data () {
        return {

        }
    } ,
    methods: {
        alert : function () {
            alert("emem") ;
        } ,
        downloadCanvas : function () {
            // 內部函數1(可忽略細節)
            const saveFile = function(data, fileName){
                let save_link = document.createElement('a');
                save_link.href = data;
                save_link.download = fileName;
        
                let event = document.createEvent('MouseEvents');
                event.initEvent("click", true, false);
                save_link.dispatchEvent(event);
            };
            // 內部函數2(可忽略細節)
            const imgType = function (ty) {
                let type = ty.toLowerCase().replace(/jpg/i, 'jpeg');
                var r = type.match(/png|jpeg|bmp|gif/)[0];
                return 'image/' + r;
            } ;

            const type = 'png';   //設置下載圖片的格式
            const cans = this.$refs.myCanvas ; //canvas實例子
            const img_png_src = cans.toDataURL("image/png");  //將canvas保存為圖片
            const imgData = img_png_src.replace(imgType(type),'image/octet-stream');
            const filename = 'canvas' + '.' + type; //下載圖片的文件名
    
            // shoot
            saveFile(imgData,filename);

        }
    } ,
    mounted: function () {
        console.log("掛載成功") ;
        var c=this.$refs.myCanvas ;
        var ctx=c.getContext("2d");
        var img=this.$refs.myImg;
        // 貼圖
        ctx.drawImage(img,0,0);
        ctx.font="10px Arial";
        // 打水印
        ctx.fillText("Kingdee",160,90);
    }
}
</script>