vue img转canvas页面展示下载

最新推荐文章于 2023-11-15 08:24:09 发布

转载最新推荐文章于 2023-11-15 08:24:09 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/daysn/p/10375568.html

文章标签：

#vue

element ui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素实现图片的下载功能，并在图片上添加文字水印。通过实例展示了如何将Canvas上的内容转换为图片数据，以及如何使用JavaScript创建下载链接来下载该图片。

<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>