canvas截图功能

最新推荐文章于 2024-08-13 09:34:30 发布

weixin_43485560

最新推荐文章于 2024-08-13 09:34:30 发布

阅读量4.6k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_43485560/article/details/109503499

版权

本文介绍如何利用canvas实现网页截图，并基于截取的图片进行二次截取。通过设置不同层级的canvas元素，结合CSS定位实现截图区域的选择与编辑。提供了相关的样式代码作为示例。

摘要由CSDN通过智能技术生成

canvas实现截图并且基于截取的图片进行二次截取

canvas截图转载于

canvas截图

  <div class="mark" id="mark">
        <div id="clip-img-w" class="img_box" ref="bigImage" @mousewheel.stop="rollImg(swiperImgInfo.imgUrl)">
            <img id="cropperImg" :src="swiperImgInfo.imgUrl" alt="" style="width: 100%" @mousedown="move"/>
            <canvas id="drawcanvas"></canvas>
            <canvas id="clipcanvas"></canvas>
        </div>
    </div>
  	<el-button plain type="primary" size="small" @click="handleAddDefect()" class="add-defect">绘制截图</el-button>



handleAddDefect() {
    console.log(this.rollImgWidth,this.rollImgHeight)
    this.cutShow = true;
    var thiz = this;
    document.getElementById('clipcanvas').style.zIndex = 4;
    var cropperImg = document.getElementById("cropperImg");
    var wrap = document.getElementById("clip-img-w");
    var width = cropperImg.offsetWidth;
    var height = cropperImg.offsetHeight;
    var clipcanvas = document.getElementById("clipcanvas");
    var drawcanvas = document.getElementById("drawcanvas");
    clipcanvas.width = cropperImg.width;
    clipcanvas.height = cropperImg.height;
    drawcanvas.width =cropperImg.width;
    drawcanvas.height = cropperImg.height;
    console.log(clipcanvas.height)
    var clipCtx = drawcanvas.getContext("2d");
    var clipImg = document.createElement("img");
    clipImg.classList.add('img_anonymous');
    clipImg.crossOrigin = "anonymous";
    clipImg.src = thiz.swiperImgInfo.imgUrl;
    var timg = clipImg.cloneNode();
    wrap.appendChild(clipImg);
    clipImg.onload = function(){
        var x = Math.floor((width - this.width)/2);
        var y = Math.floor((height - this.height)/2);
        clipCtx.drawImage(