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,,,,);

                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, , );

但是这个毕竟还是太扑街了，最后成功的demo如下

<template>

    <div>

        <h2>

            TestCanvas

        </h2>

        <img

            v-show="false"

            ref="myImg"

            src="../assets/logo.png"

        >

        <canvas

            ref="myCanvas"

            width=""

            height=""

            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/)[];

                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,,);

        ctx.font="10px Arial";

        // 打水印

        ctx.fillText("Kingdee",,);

    }

}

</script>