html2canvas简单示例

已于 2024-06-15 21:09:46 修改
阅读量444 收藏 2
点赞数 10
文章标签： javascript html vue canva可画
于 2024-06-12 17:01:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41956327/article/details/139629998
版权

公司要求开发一个组件功能，希望将html元素变成图片；话不多说，直接上代码；
代码中的文件链接：
vue.js，html2canvas.js,element-ui.css,element-ui.js
(上面的文件链接是放在我自己的服务器上。如果打开慢，请去官网下载。请不要使用我的超链接放在代码中，因为带宽太差了。请下载下来使用)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./插件/vue.js"></script>
    <script src="./插件/html2canvas.js"></script>
    <link rel="stylesheet" href="./插件/element-ui.css">
    <script src="./插件/element-ui.js"></script>
</head>

<body>
    <!-- 创建一个根元素 -->
    <div class="home" id="home" style="width: 620px;margin:auto;">
        <el-form class="bg-control" label-position="right" label-width="110px" :rules="rules" :model="form">
            <!-- <el-form-item label=" 媒体名称:" prop="mediaName">
                <el-input size="small" placeholder="请输入媒体名称" v-model="form.mediaName" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="适配分辨率:" prop="width_height">
                <el-input size="small" placeholder="输入格式例如：1920*1080" v-model="form.width_height" clearable @change="changeWidth_height" @focus="savedOldData"></el-input>
            </el-form-item>
            <el-form-item label="背景版颜色:" prop="color">
                <el-color-picker size="small" v-model="form.bgColor" show-alpha :predefine="predefineColors" @change="changeBgColor">
                </el-color-picker>
            </el-form-item>
            <el-form-item label="媒体的内容:" class="media-content">
                <div class="set">
                    <span>字体:</span>
                    <el-select size="small" v-model="form.fontFamily" @change="changeFont('fontFamily')">
                        <el-option value="SimSun" label="宋体"></el-option>
                        <el-option value="SimHei" label="黑体"></el-option>
                        <el-option value="Microsoft Yahei" label="微软雅黑"></el-option>
                        <el-option value="Microsoft JhengHei" label="微软正黑体"></el-option>
                        <el-option value="KaiTi" label="楷体"></el-option>
                        <el-option value="NSimSun" label="新宋体"></el-option>
                        <el-option value="FangSong" label="仿宋"></el-option>
                        <el-option value="cursive" label="手写草体"></el-option>
                    </el-select>
                </div>
                <div class="set">
                    <span>对齐方式:</span>
                    <el-select size="small" v-model="form.textAlign" @change="changeFont('textAlign')">
                        <el-option value="left" label="左对齐"></el-option>
                        <el-option value="right" label="右对齐"></el-option>
                        <el-option value="center" label="居中"></el-option>
                    </el-select>
                </div>
                <div class="set">
                    <span>颜色:</span>
                    <el-color-picker size="small" v-model="form.color" show-alpha :predefine="predefineColors" @change="changeFont('color')">
                    </el-color-picker>
                </div>
                <div class="set">
                    <span>字行高:</span>
                    <el-input-number size="small" v-model="form.lineHeight" :min="1" :step="0.5" @change="changeFont('lineHeight','em')"></el-nput-number>
                </div>
                <div class="set">
                    <span>字号:</span>
                    <el-input-number size="small" v-model="form.fontSize" :step="1" :min="10" @change="changeFont('fontSize','px')"></el-nput-number>
                </div>
                <div class="set">
                    <span>字间距:</span>
                    <el-input-number size="small" v-model="form.letterSpacing" :min="0" :step="0.5" @change="changeFont('letterSpacing','px')"></el-nput-number>
                </div>
                <div class="set">
                    <span>加粗:</span>
                    <el-input-number size="small" v-model="form.fontWeight" :step="100" :min="100" :max="900" @change="changeFont('fontWeight')"></el-nput-number>
                </div>
            </el-form-item>
            <el-button type="primary" size="small" @click="addTxt" :disabled="!form.width_height">添加文字</el-button>
            <el-button type="primary" size="small" @click="saved" :disabled="!form.width_height">生成canvas</el-button>
        </el-form>
        <div class="box-bg-container" :style="{'--pointColor':box.pointColor}">
            <div class="bg-plate-bottom" v-if="box.show" :style="box.bgStyle"></div>
            <div class="bg-plate" ref="bgPlate" v-if="box.show" :style="box.bgStyle" @mouseup="mouseleaveOrup" @mousemove="mousemove" @mouseleave="mouseleaveOrup" @wheel="changeSize" @click.stop="cancelDblclick">
                <div class="mask" @click.stop="cancelDblclick" v-if="txtStatus.focus" name="遮罩层"></div>
                <div class="suspension" :style="auxiliary.suspension.style" v-if="auxiliary.suspension.show">
                    <div>宽度：{{auxiliary.suspension.width}}px</div>
                    <div>高度：{{auxiliary.suspension.height}}px</div>
                    <div>旋转：{{auxiliary.suspension.rotate}}度</div>
                </div>
                <div class="horizontal" name="竖线" v-if="auxiliary.horizontal && txtStatus.move"></div>
                <div class="vertical" name="横线" v-if="auxiliary.vertical && txtStatus.move"></div>
                <div class="txtBox" v-for="(item, index) in box.txtBox" :style="item.boxStyle" @dblclick="selectText(index)" @mousedown="mousedown(index, $event)" @click.stop>
                    <div class="border" v-if="(txtStatus.move || txtStatus.focus) && index == txtStatus.index" @mousedown="changeWidth_down">
                        <div class="btn delete el-icon-delete" title="按下键盘delete" @click.stop="deleteTxt(index)"></div>
                        <div class="btn left-top"></div>
                        <div class="btn right-top"></div>
                        <div class="btn right"></div>
                        <div class="btn right-bottom"></div>
                        <div class="btn left-bottom"></div>
                        <div class="btn left"></div>
                        <div class="btn rotate el-icon-refresh"></div>
                    </div>
                    <div class="txt" :class="[`txt_${index}`]" ref="txtref" ondragstart="return false" :contenteditable="txtStatus.focus && index == txtStatus.index" :style="item.txtStyle">
                        {{ item.txt }}
                    </div>
                </div>

            </div>
        </div>
    </div>

</body>
<script>
    // 将vue挂载到id为home的根元素上
    new Vue({
        el: "#home",
        data() {
            return {
                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577'
                ],
                templateTxt: {
                    txt: '双击编辑文字',
                    boxStyle: {
                        width: 'max-content',
                        border: `1px dashed transparent`,
                        left: '10px',
                        top: '10px',
                        transform: 'rotate(0deg)'

                    },
                    txtStyle: {
                        color: 'rgb(255, 255, 255)',
                        fontSize: '66px',
                        pointerEvents: 'auto',
                        fontFamily: 'SimSun',
                        textAlign: 'left',
                        lineHeight: 1,
                        letterSpacing: 0,
                        fontWeight: 500,
                    }
                },
                auxiliary: {
                    horizontal: false,
                    vertical: false,
                    suspension: {
                        width: '', //悬浮框内容中的宽度字段
                        height: '', //悬浮框内容中的高度字段
                        rotate: '', //悬浮框内容中的旋转字段
                        show: false, //悬浮框是否显示
                        move: false, //悬浮框是否移动
                        btnName: null, //被点击的元素className

                        startX: null, //被点击的元素的起点
                        startWidth: null, //元素被按下鼠标拖拽放大缩小时，文字框架的宽
                        fontSize: null, //元素被按下鼠标拖拽放大缩小时，文字的大小
                        startLeft: null, //元素被按下鼠标拖拽放大缩小时，文字框架的left位置
                        startTop: null, //元素被按下鼠标拖拽放大缩小时，文字框架的top位置
                        startRotate: null, //元素被按下鼠标拖拽旋转时，文字框架当时的旋转的角度

                        style: {
                            left: '0',
                            top: '0'
                        }
                    }
                },
                form: {
                    mediaName: '',
                    width_height: '',
                    bgColor: 'rgba(0,0,0,1)',
                    old_width_height: '',
                    fontFamily: null,
                    textAlign: '',
                    color: null,
                    lineHeight: undefined,
                    fontSize: undefined,
                    letterSpacing: undefined,
                    fontWeight: undefined,
                },

                box: {
                    pointColor: '#c1c1c1', //
                    show: false, //背景版的开关
                    bgStyle: {
                        width: '1000px',
                        height: '600px',
                        transform: 'scale(1)',
                        backgroundColor: '',
                    }, //背景版的style
                    txtBox: [], //文字数组
                },

                txtStatus: {
                    focus: false,
                    move: false,
                    index: null,
                    EleStartX: null, //元素的起始点
                    EleStartY: null, //元素的起始点
                    mouseStartX: null,
                    mouseStartY: null
                },
                rules: {
                    mediaName: [{
                        required: true,
                        message: '请输入媒体名称',
                        trigger: 'blur'
                    }, ],
                    width_height: [{
                        required: true,
                        message: '请输入适配分辨率',
                        trigger: 'blur'
                    }, ]
                }
            }
        },
        mounted() {
            window.addEventListener('keydown', (e) => {
                switch (e.key) {
                    case 'Escape':
                        if (this.txtStatus.focus) this.cancelDblclick();
                        break;
                    case 'Delete':
                        if (this.txtStatus.focus) this.deleteTxt(this.txtStatus.index);
                        break;
                    default:
                        break
                }
            })
        },
        beforeDestroy() {

        },
        methods: {
            //保存一下旧的背景版宽高的数据
            savedOldData() {
                this.form.old_width_height = this.form.width_height;
            },
            //修改背景版的颜色
            changeWidth_height() {
                if (this.form.width_height.indexOf('*') == -1) return
                this.createdBox();
                let arrnew = this.form.width_height.split('*');
                let arrold = this.form.old_width_height.split('*');
                for (let i in this.box.txtBox) {
                    let left = parseFloat(this.box.txtBox[i].boxStyle.left);
                    let top = parseFloat(this.box.txtBox[i].boxStyle.top);
                    this.box.txtBox[i].boxStyle.left = (left + (arrnew[0] - arrold[0]) / 2) + 'px';
                    this.box.txtBox[i].boxStyle.top = (top + (arrnew[1] - arrold[1]) / 2) + 'px';
                }
            },
            //新建背景版
            createdBox() {
                this.cancelDblclick();
                if (!this.form.width_height) return
                let arr = this.form.width_height.split('*');
                this.box.bgStyle.width = arr[0] + 'px';
                this.box.bgStyle.height = arr[1] + 'px';
                let father = document.querySelector('.box-bg-container');
                let fatherHeight = father.offsetHeight;
                let fatherWidth = father.offsetWidth;
                this.box.bgStyle.left = (fatherWidth - arr[0]) / 2 + 'px';
                this.box.bgStyle.top = (fatherHeight - arr[1]) / 2 + 'px';
                this.box.bgStyle.backgroundColor = this.form.bgColor;
                this.box.show = true;
            },
            //提交保存
            saved() {
                this.cancelDblclick();
                let ele = this.$refs.bgPlate;
                if (!ele) return;
                let ele_clone = ele.cloneNode(true);
                let boxBig = document.querySelector('.box-bg-container')
                boxBig.appendChild(ele_clone)
                let scale = this.box.bgStyle.transform;
                this.box.bgStyle.transform = 'scale(1)';
                this.box.bgStyle.zIndex = '-1';
                this.$nextTick(() => {
                    html2canvas(ele).then((canvas) => {
                        let newCanvas = document.body.appendChild(canvas)
                        let newImg = newCanvas.toDataURL('image/png');
                        console.log('base64', newImg);
                        console.log('数据类型', JSON.stringify(this.box));

                        // this.box.bgStyle.transform = scale; //还原
                        // delete this.box.bgStyle.zIndex; //还原
                        // boxBig.removeChild(ele_clone); //还原
                        // newCanvas.remove();
                    })
                })
            },
            //删除文字
            deleteTxt(index) {
                this.box.txtBox.splice(index, 1);
                this.txtStatus.index = null;
                this.txtStatus.focus = false;
            },

            //控制中间线的出现和隐藏
            horizontal_vertical(i) {
                let boxEle = this.$refs.txtref[i].parentElement;
                let centerX = parseFloat(this.box.bgStyle.width) / 2 - boxEle.offsetWidth / 2; //背景板中心的x坐标-当前元素的width
                let centerY = parseFloat(this.box.bgStyle.height) / 2 - boxEle.offsetHeight / 2; //背景板中心的y坐标-当前元素的height
                let left = parseFloat(this.box.txtBox[i].boxStyle.left); //获取当前的元素的left坐标
                let top = parseFloat(this.box.txtBox[i].boxStyle.top); //获取当前的元素的top坐标

                if (left < centerX + 2 && left > centerX - 2) this.auxiliary.horizontal = true; //当前的元素的 left 坐标与居中的位置相差± 3的时候，显示，否则不显示
                else this.auxiliary.horizontal = false;

                if (top < centerY + 2 && top > centerY - 2) this.auxiliary.vertical = true; //当前的元素的 top 坐标与居中的位置相差± 3的时候，显示，否则不显示
                else this.auxiliary.vertical = false;
            },
            //按下鼠标：记录各个工作的起始点
            mousedown(index, e) {
                if (e.button != 0) return
                if (this.txtStatus.focus) return
                this.box.txtBox[index].txtStyle.cursor = 'move';
                this.box.txtBox[index].boxStyle.border = `1px dashed ${this.box.pointColor}`;
                this.txtStatus.move = true;
                this.txtStatus.index = index;
                let parentEle = e.target.parentNode;
                this.txtStatus.EleStartX = parseFloat(parentEle.style.left);
                this.txtStatus.EleStartY = parseFloat(parentEle.style.top);
                this.txtStatus.mouseStartX = e.pageX; //记录鼠标点击的起始点
                this.txtStatus.mouseStartY = e.pageY; //记录鼠标点击的起始点
                this.box.txtBox.splice();
            },
            // 按下鼠标：记录各个工作的起始点
            changeWidth_down(e) {
                if (e.button != 0) return
                if (!this.txtStatus.focus) return
                let classList = e.target.classList;
                if (classList[1] == 'delete') return
                this.auxiliary.suspension.btnName = classList[1];
                this.auxiliary.suspension.startX = e.pageX;
                this.auxiliary.suspension.startY = e.pageY;
                let i = this.txtStatus.index;
                this.auxiliary.suspension.move = true;
                let ele_txt = this.$refs.txtref[i].getBoundingClientRect();
                if (classList[1] == 'left') {
                    this.auxiliary.suspension.startwidth = parseFloat(ele_txt.width)
                    this.auxiliary.suspension.startLeft = parseFloat(this.box.txtBox[i].boxStyle.left);
                } else if (classList[1] == 'right') {
                    this.auxiliary.suspension.startwidth = parseFloat(ele_txt.width);
                } else if (classList[1] == 'left-top' || classList[1] == 'right-top' || classList[1] == 'left-bottom') {
                    this.auxiliary.suspension.fontSize = parseFloat(this.box.txtBox[i].txtStyle.fontSize);
                    this.auxiliary.suspension.startLeft = parseFloat(this.box.txtBox[i].boxStyle.left);
                    this.auxiliary.suspension.startTop = parseFloat(this.box.txtBox[i].boxStyle.top);
                } else if (classList[1] == 'right-bottom') {
                    this.auxiliary.suspension.fontSize = parseFloat(this.box.txtBox[i].txtStyle.fontSize);
                    this.auxiliary.suspension.startLeft = parseFloat(this.box.txtBox[i].boxStyle.left);
                } else if (classList[1] == 'rotate') {
                    let ele_w = parseFloat(this.$refs.txtref[i].offsetWidth);
                    let ele_h = parseFloat(this.$refs.txtref[i].offsetHeight);
                    let ele_l = parseFloat(this.box.txtBox[i].boxStyle.left);
                    let ele_t = parseFloat(this.box.txtBox[i].boxStyle.top);
                    let orginX = ele_l + ele_w / 2;
                    let orginY = ele_t + ele_h / 2;
                    this.auxiliary.suspension.startRotate = [orginX, orginY]
                }
                this.showSuspension(e)
            },
            //拖拽鼠标：计算移动的距离
            mousemove(e) {
                let scale = parseFloat(this.box.bgStyle.transform.replace('scale(', '').replace(')', ''));
                if (this.txtStatus.move && !this.txtStatus.focus) {
                    let moveX = this.txtStatus.mouseStartX - e.pageX; //鼠标移动的距离
                    let moveY = this.txtStatus.mouseStartY - e.pageY; //鼠标移动的距离
                    let i = this.txtStatus.index;
                    this.box.txtBox[i].boxStyle.left = this.txtStatus.EleStartX - moveX / scale + 'px'
                    this.box.txtBox[i].boxStyle.top = this.txtStatus.EleStartY - moveY / scale + 'px'
                    this.horizontal_vertical(i);
                } //当处于移动的状态的时候，执行此功能会一直修改元素的位置
                else if (this.auxiliary.suspension.move && this.txtStatus.focus) {
                    let moveX = this.auxiliary.suspension.startX - e.pageX; //鼠标移动的距离
                    let moveY = this.auxiliary.suspension.startY - e.pageY; //鼠标移动的距离
                    let i = this.txtStatus.index;
                    let btnName = this.auxiliary.suspension.btnName;
                    if (btnName == 'left') {
                        moveX = moveX / scale;
                        this.box.txtBox[i].boxStyle.width = (this.auxiliary.suspension.startwidth + moveX) / scale + 'px';
                        this.box.txtBox[i].boxStyle.left = (this.auxiliary.suspension.startLeft - moveX) + 'px'
                    } else if (btnName == 'right') {
                        moveX = moveX / scale;
                        this.box.txtBox[i].boxStyle.width = (this.auxiliary.suspension.startwidth - moveX * scale) / scale + 'px';
                    } else if (btnName == 'left-top') {
                        moveX = moveX / scale;
                        this.box.txtBox[i].txtStyle.fontSize = this.auxiliary.suspension.fontSize + moveX + 'px';
                        this.box.txtBox[i].boxStyle.left = this.auxiliary.suspension.startLeft - moveX + 'px';
                        this.box.txtBox[i].boxStyle.top = this.auxiliary.suspension.startTop - moveY + 'px';
                        this.form.fontSize = parseFloat(this.box.txtBox[i].txtStyle.fontSize);
                    } else if (btnName == 'left-bottom') {
                        this.box.txtBox[i].txtStyle.fontSize = this.auxiliary.suspension.fontSize + moveX + 'px';
                        this.box.txtBox[i].boxStyle.left = this.auxiliary.suspension.startLeft - moveX + 'px';
                        this.box.txtBox[i].boxStyle.top = this.auxiliary.suspension.startTop + moveY + 'px';
                        this.form.fontSize = parseFloat(this.box.txtBox[i].txtStyle.fontSize);
                    } else if (btnName == 'right-top') {
                        let txt = this.box.txtBox[i].txt.length;
                        this.box.txtBox[i].txtStyle.fontSize = this.auxiliary.suspension.fontSize - moveX + 'px';
                        this.box.txtBox[i].boxStyle.left = this.auxiliary.suspension.startLeft + moveX * (txt - 1) + 'px';
                        this.box.txtBox[i].boxStyle.top = this.auxiliary.suspension.startTop + moveY + 'px';
                        this.form.fontSize = parseFloat(this.box.txtBox[i].txtStyle.fontSize);
                    } else if (btnName == 'right-bottom') {
                        let txt = this.box.txtBox[i].txt.length;
                        this.box.txtBox[i].txtStyle.fontSize = this.auxiliary.suspension.fontSize - moveX + 'px';
                        this.box.txtBox[i].boxStyle.left = this.auxiliary.suspension.startLeft + moveX * (txt - 1) + 'px';
                        this.form.fontSize = parseFloat(this.box.txtBox[i].txtStyle.fontSize);
                    } else if (btnName == 'rotate') {
                        if (!this.auxiliary.suspension.startRotate) return
                        let orginX = this.auxiliary.suspension.startRotate[0]; //围绕选择的中心点
                        let orginY = this.auxiliary.suspension.startRotate[1]; //围绕选择的中心点
                        let boxH = parseFloat(this.box.bgStyle.height);
                        let ele = document.querySelector('.bg-plate').getBoundingClientRect();
                        let x = (e.pageX - ele.left) / scale;
                        let y = (e.pageY - ele.top) / scale;
                        let rotate = this.getAngle([orginX - orginX, boxH - orginY], [x - orginX, y - orginY])
                        this.box.txtBox[i].boxStyle.transform = `rotate(${rotate.toFixed(2)}deg)`
                    }
                    if (parseFloat(this.box.txtBox[i].txtStyle.fontSize) * scale < 10) this.auxiliary.suspension.move = false
                    this.showSuspension(e)
                } //当处于修改宽高的状态的时候，执行此功能会一直修改元素的宽高
            },

            //销毁移动；清空各个变量的状态
            mouseleaveOrup(e) {
                if (e.button != 0) return
                if (!this.txtStatus.focus && this.txtStatus.move) {
                    let i = this.txtStatus.index;
                    this.box.txtBox[i].txtStyle.cursor = 'default';
                    this.box.txtBox[i].boxStyle.border = "1px dashed transparent";
                    this.txtStatus.mouseStartX = null;
                    this.txtStatus.mouseStartY = null;
                    this.txtStatus.EleStartX = null;
                    this.txtStatus.EleStartY = null;
                    this.txtStatus.move = false;
                    this.txtStatus.index = 0;
                    this.box.txtBox.splice();
                } //当处于移动的状态的时候，执行此功能会关闭移动的状态
                else if (this.txtStatus.focus && this.auxiliary.suspension.move) {
                    this.auxiliary.suspension.show = false;
                    this.auxiliary.suspension.move = false;
                    this.auxiliary.suspension.btnName = null;
                    this.auxiliary.suspension.startX = null;
                    this.auxiliary.suspension.startWidth = null;
                    this.auxiliary.suspension.fontSize = null;
                    this.cancelDblclick()
                } //当处于修改宽的状态的时候，执行此功能会关闭修改宽高的状态
            },
            //计算旋转角度
            getAngle([x1, y1], [x2, y2]) {
                const dot = x1 * x2 + y1 * y2
                const det = x1 * y2 - y1 * x2
                const angle = Math.atan2(det, dot) / Math.PI * 180
                return (angle + 360) % 360
            },
            //双击文字
            selectText(index) {
                this.txtStatus.focus = true;
                this.txtStatus.index = index;
                this.box.txtBox[index].txtStyle.cursor = 'text';
                this.box.txtBox[index].boxStyle.border = `1px dashed ${this.box.pointColor}`;
                this.box.txtBox.splice();
                this.$nextTick(() => {
                    let ele = this.$refs.txtref[index];
                    if (document.selection) {
                        let range = document.body.createTextRange()
                        range.moveToElementText(ele);
                        range.select();
                    } else if (window.getSelection) {
                        let range = document.createRange();
                        range.selectNodeContents(ele)
                        window.getSelection().removeAllRanges()
                        window.getSelection().addRange(range)
                    }
                })
                let txt = this.box.txtBox[index].txtStyle;
                this.form.fontFamily = txt.fontFamily;
                this.form.textAlign = txt.textAlign;
                this.form.color = txt.color;
                this.form.lineHeight = parseFloat(txt.lineHeight);
                this.form.fontSize = parseInt(txt.fontSize);
                this.form.letterSpacing = parseFloat(txt.letterSpacing);
                this.form.fontWeight = parseInt(txt.fontWeight);
            },
            //取消双击效果
            cancelDblclick() {
                let i = this.txtStatus.index;
                if (i === null) return
                if (!this.txtStatus.focus) return
                    // this.box.txtBox[i].txtStyle.backgroundColor = '';
                this.box.txtBox[i].txtStyle.cursor = 'default';
                this.box.txtBox[i].boxStyle.border = "1px dashed transparent";


                this.changeTxt(i)


                this.txtStatus.index = null;
                this.txtStatus.focus = false;
                this.box.txtBox.splice();
                this.form.fontFamily = null;
                this.form.textAlign = null;
                this.form.color = null;
                this.form.lineHeight = undefined;
                this.form.fontSize = undefined;
                this.form.letterSpacing = undefined;
                this.form.fontWeight = undefined;
                this.auxiliary.suspension.show = false
            },
            //添加文字
            addTxt() {
                this.cancelDblclick()
                if (!this.box.show) return
                let txt = JSON.parse(JSON.stringify(this.templateTxt));
                if (!this.box.show) return
                    //当一个字的大小为66，那么这个字框的宽度就是字数*66，高度就是66;这个地方
                let fontS = parseInt(txt.txtStyle.fontSize);
                let txtNum = txt.txt.length;
                txt.boxStyle.left = parseFloat(this.box.bgStyle.width) / 2 - (fontS * txtNum / 2) + 'px';
                txt.boxStyle.top = parseFloat(this.box.bgStyle.height) / 2 - (fontS / 2) + 'px';
                // txt.boxStyle.backgroundColor = this.form.bgColor;
                this.auxiliary.horizontal = true;
                this.auxiliary.vertical = true;
                this.box.txtBox.push(txt);
                let i = this.box.txtBox.length - 1;
                this.selectText(i);
            },

            //小视窗的位置和内部的信息
            showSuspension(e) {
                let i = this.txtStatus.index;
                this.auxiliary.suspension.show = true;
                this.auxiliary.suspension.style.left = e.pageX + 10 + 'px';
                this.auxiliary.suspension.style.top = e.pageY + 10 + 'px';
                let ele_txt = this.$refs.txtref[i];
                this.auxiliary.suspension.width = parseInt(ele_txt.offsetWidth);
                this.auxiliary.suspension.height = parseInt(ele_txt.offsetHeight);
                let rotate = this.box.txtBox[i].boxStyle.transform;
                this.auxiliary.suspension.rotate = rotate.replace('rotate(', '').replace('deg)', '');
            },
            //通过滚轮修改背景的大小
            changeSize(e) {
                e.preventDefault()
                if (this.txtStatus.focus) return;
                if (this.txtStatus.move) return;
                let changeSize; //这可以看做百分比
                if (e.deltaY > 0) changeSize = -0.02;
                else if (e.deltaY < 0) changeSize = 0.02;
                let scale = parseFloat(this.box.bgStyle.transform.replace('scale(', '').replace(')', '')) + changeSize;
                if (scale < 0.05) return
                this.box.bgStyle.transform = `scale(${scale})`

            },
            //修改选中字体的方法
            changeFont(attribute, pixel = '') {
                let i = this.txtStatus.index;
                if (i == null) return
                this.box.txtBox[i].txtStyle[attribute] = this.form[attribute] + pixel;
            },
            //改变背景版的颜色
            changeBgColor() {
                this.box.bgStyle.backgroundColor = this.form.bgColor;
                this.box.txtBox.splice()
            },
            changeTxt(index) {
                this.box.txtBox[index].txt = this.$refs.txtref[index].innerText;
                this.box.txtBox.splice()
            }
        }
    });
</script>
<style lang="scss">
    .bg-control {
        .media-content {
            background-color: #f4f6fa;
            .el-form-item__content {
                display: flex;
                flex-wrap: wrap;
                box-sizing: border-box;
                .set {
                    width: 50%;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    margin-bottom: 5px;
                    >span {
                        width: 60px;
                        text-align: right;
                        padding-right: 10px;
                    }
                    .el-color-picker {
                        width: 150px;
                        border: 1px solid #e6e6e6;
                        .el-color-picker__trigger {
                            border: none;
                        }
                    }
                    .el-input-number {
                        width: 150px;
                    }
                    .el-select {
                        width: 150px;
                    }
                }
            }
        }
    }
    
    .box-bg-container {
        background-color: #f5f5f5;
        margin-top: 10px;
        border: 1px dashed #616161;
        height: 510px;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: rgba(0, 0, 0, 0);
            left: 0;
            top: 0;
            box-sizing: border-box;
        }
        .bg-plate,
        .bg-plate-bottom {
            overflow: hidden;
            box-shadow: 0 4px 20px var(--stroke--separater);
            box-sizing: border-box;
            transform-origin: center;
            position: absolute;
            .suspension {
                position: fixed;
                color: var(--pointColor);
                font-size: 12px;
                background-color: rgba(0, 0, 0, 0.9);
                padding: 6px 10px;
                z-index: 1;
                border-radius: 10px;
                border: 1px solid #919191;
                user-select: none;
            }
            .horizontal {
                width: 2px;
                height: 100%;
                opacity: 0.5;
                background-color: var(--pointColor);
                position: absolute;
                left: calc(50% + 2px);
                transform: translate(-50%, 0%);
            }
            .vertical {
                width: 100%;
                height: 2px;
                opacity: 0.5;
                background-color: var(--pointColor);
                position: absolute;
                top: calc(50% - 2px);
                transform: translate(0%, -50%);
            }
            .txtBox {
                position: absolute;
                height: auto;
                .border {
                    .btn {
                        user-select: none;
                        width: 8px;
                        height: 8px;
                        background-color: var(--pointColor);
                        border-radius: 100%;
                        position: absolute;
                        user-select: none;
                        transform: translate(-50%, -50%);
                    }
                    .left-top.btn {
                        cursor: se-resize;
                    }
                    .left.btn {
                        left: 0;
                        top: 50%;
                        height: 4px;
                        width: 16px;
                        border-radius: 4px;
                        transform: rotate(90deg) translate(-25%, 8px);
                        cursor: w-resize;
                    }
                    .right-top.btn {
                        left: 100%;
                        cursor: ne-resize;
                    }
                    .right.btn {
                        left: 100%;
                        top: 50%;
                        height: 4px;
                        width: 16px;
                        border-radius: 4px;
                        transform: rotate(90deg) translate(-25%, 8px);
                        cursor: w-resize;
                    }
                    .left-bottom.btn {
                        left: 0%;
                        top: 100%;
                        cursor: ne-resize;
                    }
                    .right-bottom.btn {
                        left: 100%;
                        top: 100%;
                        cursor: se-resize;
                    }
                    .delete.btn {
                        width: 18px;
                        height: 18px;
                        color: var(--pointColor);
                        font-size: 16px;
                        left: 50%;
                        top: -30px;
                        background-color: transparent;
                        cursor: pointer;
                    }
                    .delete.btn::before {
                        position: absolute;
                        left: 50%;
                        transform: translate(-50%, 0px);
                    }
                    .btn.rotate {
                        width: 18px;
                        height: 18px;
                        color: var(--pointColor);
                        font-size: 16px;
                        left: 50%;
                        bottom: -50px;
                        background-color: transparent;
                        //cursor: url(./_mouse-icon-rotate-0.svg) 12 12, auto;
                    }
                    .btn.rotate::before {
                        position: absolute;
                        left: 50%;
                        transform: translate(-50%, 0px);
                    }
                }
                .txt {
                    width: 100%;
                    height: 100%;
                    user-select: none;
                    cursor: default;
                    box-sizing: border-box;
                    outline: none;
                    word-break: break-all;
                }
            }
        }
        .bg-plate-bottom {
            background-image: url(./_background-transparent.png);
        }
    }
</style>

</html>

使用html2canvas生成的dom元素，其元素以及子元素尽量不要使用transform:translate；否则会出现绘制canvas定位显示问题
文件图片（_background-transparent）：文件图片

连云港前端-丢卡狂魔
关注
  • 10
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html2canvas生成图片案例
02-11
html2canvas生成图片案例，如不想下载可查看本人博客 https://blog.csdn.net/dream0129/article/details/86983023
html2Canvas截图加demo
10-29
htm2Canvas实现网页截图功能，包括demo。
html2canvas简单有效测试
11-10
html2canvas简单有效测试，可以截取当前网页窗口内容，全部或是根据选择器，选择部分内容
html2canvas踩坑记
热门推荐
我的技术博客
01-09 4万+
前端程序员墓志铭:永远不要使用Alpha版的插件 最近写一个活动项目需要将一个HTML页面转为图片,之前一直是后台采用拼接的方式完成,然而现在遇到一个问题,Java拼接的HTML在生成图片时由于里面的文字太长没法自动换行,想使用css的强制换行 #wrap{word-break:break-all; width:200px;} 或者 #wrap{word-wrap:break-word;
使用html2canvas.js将HTML转为canvas
花铛
11-22 2153
html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。他不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。 html2canvas脚本将页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。 当浏览器不支持canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3...
html2canvas(1.0.0)
02-22
html2canvas改过后的插件
html2canvas的使用方法,html2Canvas使用总结
weixin_36173034的博客
06-15 3万+
需要将一个背景图+动态获取的文字+微信头像拼接成一张图片，用户可长按保存最终图片，难免就是要将html转换成图片。最初想要自己用canvas画，但是略麻烦，后来发现了html2canvas这个插件，先将html转成canvas，再生成图片。使用起来也很简单：setTimeout(function () {html2canvas($('#img_html')[0]).then(function (c...
html2canvas使用教程
weixin_45917647的博客
08-09 1万+
html2canvas屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。
html2canvas.js
现役码农的博客
05-02 3968
上次说了实现html到图片的转换，使用了svg，后来发现有线程的第三方js可以使用。这个maven下的代码 &lt;dependency&gt;  &lt;groupId&gt;org.webjars&lt;/groupId&gt;  &lt;artifactId&gt;html2canvas&lt;/artifactId&gt;  &lt;version&gt;0.4.1&lt;/version...
HTML2CANVAS使用总结
林恒的博客
03-05 1万+
前言 最近遇到了个功能，要把表单转化成图片来保存，这让我想到了一个插件HTML2CANVAS，这里给大家分享下它的用法和我使用的过程 html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器...
html5 canvas 使用示例
09-28
在这个简单的示例中，我们将探讨如何利用HTML5 Canvas元素创建一个基本的绘图应用，用户可以选择不同的工具（如铅笔、直线、矩形、圆形和椭圆）来在画布上作画。 首先，HTML部分定义了一个`<select>`元素，用户可以...
html2canvas.js 下载
04-13
或者html2canvas.min.js（压缩版），通过简单的API调用即可生成页面的截图。此外，它支持大部分CSS3属性，能够很好地还原复杂布局和动态效果，使得网页截屏效果接近原生。 **应用示例** 1. **社交分享**：用户可以...
使用html2canvas.js将前端页面生成图片，并下载图片
qq_41964720的博客
10-18 2927
使用html2canvas.js将前端页面生成图片
html2canvas使用指南
Mr_LiangDaGe的博客
05-05 4125
html2canvas的简单使用
html2canvas使用文档
前端学习笔记
03-06 4514
大部分情况下使用默认配置即可，如有需要，可根据配置项标修改。以 vue 举例，这样写起来比较方便。如果想要将图片导出，可以这样写。
photoView控件的使用
达帮主
05-15 526
photoView: 效果: 一，先说下photoView PhotoView的简介： 这是一个图片查看库，实现图片浏览功能，支持pinch（捏合）手势或者点击放大缩小。支持在ViewPager中翻页浏览图片。 PhotoView 是一款扩展自Android ImageView ，支持通过单点/多点触摸来进行图片缩放的智能控件。功能实用和强大。 PhotoView的功能...
vue的html2canvas使用解读，完美避免可能会造成的问题
为写出赏心悦目、容易维护的代码而探索
01-09 1万+
解决疑难杂症
html2canvas
notagoodwriter的博客
06-16 1万+
html2canvas应用
html2canvas 截图示例
最新发布
07-29
html2canvas是一个用于将HTML元素转化为Canvas画布的JavaScript库。它可以帮助我们在浏览器端实现截图的功能。 下面是一个使用html2canvas的简单截图示例： 首先，在HTML文件中引入html2canvas的JavaScript文件，例如： ```html <script src="html2canvas.min.js"></script> ``` 然后，在需要截图的元素上添加一个id，例如： ```html <div id="screenshot">这是要截图的内容</div> ``` 接下来，在JavaScript中使用html2canvas来截图，例如： ```javascript html2canvas(document.getElementById("screenshot")).then(function(canvas) { // 创建一个隐藏的<a>标签 var link = document.createElement('a'); link.style.display = 'none'; document.body.appendChild(link); // 将Canvas画布转化为图片数据URL link.href = canvas.toDataURL(); link.download = 'screenshot.png'; // 设置下载的文件名 link.click(); // 移除隐藏的<a>标签 document.body.removeChild(link); }); ``` 这个示例中，我们首先使用getElementById方法获取到id为"screenshot"的元素。然后通过html2canvas的then方法来获取到Canvas画布对象。 接着，我们创建一个隐藏的<a>标签，将Canvas画布转化为图片数据URL，并设置下载的文件名。最后，通过click方法触发<a>标签的点击事件，实现截图文件的下载。 以上就是一个简单的html2canvas截图示例。你可以按照这个示例来实现自己想要的截图功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值