vue 创建canvas画板制作图片和文字，支持文字自动换行

最新推荐文章于 2024-06-03 11:31:46 发布

嘿喵-财运旺旺

最新推荐文章于 2024-06-03 11:31:46 发布

阅读量3k

点赞数

分类专栏： javascript vue

本文链接：https://blog.csdn.net/sym134/article/details/106146593

版权

javascript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

vue

21 篇文章 0 订阅

订阅专栏

canvas文档：https://www.runoob.com/jsref/dom-obj-canvas.html

创建画板、图片、文字、自动换行都是分开方法，可以灵活调用
里面有两个小demo，演示调用方法
其实简单修改也可以不需要依靠vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    img {
        width: 100%;
        height: 100%;
    }
</style>
<body style="background-color: blue">
<div id="app">
    <!-- 画板 -->
    <canvas style="display: none" id="myCanvas" width=""></canvas>
    <!-- 效果 -->
    <img :src="img_src" alt="">
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: {
            img_src: '',
            ctx: '',
            myCanvas: '',
        },
        methods: {
            makePlan() { // demo1
                let row = 15; // 行数会影响页面的长度 签字预留400 顶部预留100
                this.makeCanvas(400, 500 + 20 * row); // 签字预留400 上面文字 100+20*行数
                //文本
                this.makeText('标题', 200, 40, 'center', '#000', '20px Arial')
                this.makeLine(20, 60, 380, 60);
                this.makeText('任务', 100, 100, 'center', '#000', '16px Arial')
                this.makeText('单位', 300, 100, 'center', '#000', '16px Arial')
                let i = 0;
                for (i = 0; i < row; i++) {
                    this.makeText('2020-02-13-2020-03-13', 100, 120 + 20 * i, 'center')
                    this.makeText('90次', 300, 120 + 20 * i, 'center')
                }
                this.makeLine(20, 120 + 20 * i, 380, 120 + 20 * i);
                let img = 'https://csdnimg.cn/public/common/toolbar/images/eduwxfix.png'
                this.makeImage(img, 20, 400, 360); // 创建图片
                this.imagePut();
            },
            makeFloat(text) { // demo2
                // 超长画布来计算文字预计的高度
                this.makeCanvas(400, 10000);
                let y = this.autoRow(text, 20, 0, 360, 20, '16px Arial')  // 计算文字的总高度
                this.makeCanvas(400, 500 + y); // 签字预留400 上面文字 100+20*行数
                //文本
                this.makeText('考核任务', 200, 40, 'center', '#000', '20px Arial')
                this.makeLine(20, 60, 380, 60);
                y = this.autoRow(text, 20, 90, 360, 20, '16px Arial')
                this.makeLine(20, 20 + y, 380, 20 + y);
                this.imagePut();
            },
            makeImage(url, x, y, width) {
                let image = new Image();
                image.setAttribute('crossOrigin', 'anonymous')
                image.src = url;
                image.onload = () => {
                    this.ctx.drawImage(image, x, y, width, image.height * width / image.height);
                }
            },
            imagePut(type) { // 输出图像
                // 因为需要渲染图像才能导出，暂时没啥办法，几计时刷新了，有大牛好办法可以留言
                let i = 0;
                let t = setInterval(() => {
                    i++;
                    this.img_src = this.ctx.canvas.toDataURL(type);
                    if (i > 100) {
                        clearInterval(t)
                    }
                }, 100);
            },
            makeCanvas(width, height) { // 初始化画板
                this.myCanvas = document.getElementById('myCanvas');  // 画板id
                this.myCanvas.width = width;  //尺寸
                this.myCanvas.height = height;
                this.ctx = this.myCanvas.getContext('2d');
                this.ctx.fillStyle = '#ffffff';
                this.ctx.fillStyle = '#fff';
                this.ctx.fillRect(0, 0, this.myCanvas.width, this.myCanvas.height);
            },
            makeText(text, x, y, align, color, font) { //文字
                this.ctx.font = !font ? '14px Arial' : font;
                this.ctx.fillStyle = !color ? '#4a4a4a' : color;
                this.ctx.textAlign = !align ? 'left' : align;
                this.ctx.fillText(text, x, y);
            },
            makeLine(start_x, start_y, end_x, end_y, cap,) { // 线条
                this.ctx.beginPath();
                this.ctx.lineCap = !cap ? "round" : cap;
                this.ctx.moveTo(start_x, start_y);
                this.ctx.lineTo(end_x, end_y);
                this.ctx.stroke();
            },
            /**
             * 自动换行
             * @param text
             * @param x
             * @param y
             * @param maxWidth 最大宽度
             * @param lineHeight 行高
             */
            autoRow(text, x, y, maxWidth, lineHeight, font) {
                let arrText = text.split('');
                let line = '';
                this.ctx.font = !font ? '14px Arial' : font;
                for (let n = 0; n < arrText.length; n++) {
                    let testLine = line + arrText[n];
                    let metrics = this.ctx.measureText(testLine);
                    let testWidth = metrics.width;
                    if (testWidth > maxWidth && n > 0) {
                        this.makeText(line, x, y)
                        line = arrText[n];
                        y += lineHeight;
                    } else {
                        line = testLine;
                    }
                }
                this.makeText(line, x, y);
                return y;
            }
        },
        created() {
            this.makePlan('');
        }
    })

</script>

嘿喵-财运旺旺

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue 创建canvas画板制作图片和文字，支持文字自动换行

canvas文档：https://www.runoob.com/jsref/dom-obj-canvas.html创建画板、图片、文字、自动换行都是分开方法，可以灵活调用里面有两个小demo，演示调用方法其实简单修改也可以不需要依靠vue<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></
复制链接

扫一扫