vue項(xiàng)目中怎么使用canvas實(shí)現(xiàn)截圖功能

本文小編為大家詳細(xì)介紹“vue項(xiàng)目中怎么使用canvas實(shí)現(xiàn)截圖功能”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue項(xiàng)目中怎么使用canvas實(shí)現(xiàn)截圖功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

實(shí)現(xiàn)效果：

整理一下最近在vue項(xiàng)目中做的一個(gè)截圖功能（只能夠截取圖片），即用鼠標(biāo)在畫布上進(jìn)行框選截取。

思路大概如下：做一個(gè)彈窗，打開彈窗的時(shí)候傳入要截的圖，接下來在這個(gè)窗口里面，點(diǎn)擊截圖按鈕，開始截圖，點(diǎn)擊取消按鈕，取消截圖。

窗口里面的html主要是三個(gè)部分，一個(gè)是可截圖區(qū)域，一個(gè)是截取圖片的回顯，一個(gè)是操作按鈕（截圖按鈕和取消截圖按鈕）。

部分html：

<!--截圖區(qū)域-->
<div id="clip-img-w" class="img_box">
    <canvas id="drawcanvas"></canvas>
    <canvas id="clipcanvas"></canvas>
    <img id="img_big" :src="imgSrc">
</div>
<!--回顯區(qū)域-->
<div class="img_group_item">
    <img id="img" :src="cutImgSrc">
</div>
<!--操作按鈕-->
<div class="btn_box" align="center">
    <span class="btn_cut" @click="cut()"></span>
    <span v-if="draw" class="btn_cut_cancel" @click="cancelCut()"></span>
</div>

用到的data：

data() {
    return {
        // 儲(chǔ)存截圖區(qū)域的圖片,自己傳
        imgSrc: '',
        // 儲(chǔ)存截圖后的生成的base64圖片
        cutImgSrc: '',
        // 判斷當(dāng)前是否處于截圖狀態(tài)
        draw: false
    };
},

截圖：

cut(){
    var thiz = this;
    thiz.draw = true; //顯示“取消截圖”的按鈕
    var img = document.getElementById("img");

    var wrap = document.getElementById("clip-img-w");
    var width = wrap.offsetWidth;
    var height = wrap.offsetHeight;

    var clipcanvas = document.getElementById("clipcanvas");
    var drawcanvas = document.getElementById("drawcanvas");
    clipcanvas.width = width;
    clipcanvas.height = height;
    drawcanvas.width = width;
    drawcanvas.height = height;

    var clipCtx = drawcanvas.getContext("2d");
    var clipImg = document.createElement("img");
    clipImg.classList.add('img_anonymous');
    clipImg.crossOrigin = "anonymous";
    clipImg.src = thiz.imgSrc;
    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(this,0,0,timg.width,timg.height,x,y,this.width,this.height);
    };

    var ctx = clipcanvas.getContext("2d");
    ctx.fillStyle = 'rgba(0,0,0,0.6)';
    ctx.strokeStyle="rgba(0,143,255,1)";
    var start = null;
    var clipArea = {};//裁剪范圍

    clipcanvas.onmousedown = function(e){
        start = {
            x:e.offsetX,
            y:e.offsetY
        };
    };
    clipcanvas.onmousemove = function(e){
        if(start){
            fill(start.x,start.y,e.offsetX-start.x,e.offsetY-start.y)
        }
    };
    document.addEventListener("mouseup",function(){
        if(start){
            start = null;
            var url = startClip(clipArea);
            img.src= url;
            //生成base64格式的圖
            thiz.cutImgSrc = url;
        }
    });
    function fill(x,y,w,h){
        ctx.clearRect(0,0,width,height);
        ctx.beginPath();
        //遮罩層
        ctx.globalCompositeOperation = "source-over";
        ctx.fillRect(0,0,width,height);
        //畫框
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillRect(x,y,w,h);
        //描邊
        ctx.globalCompositeOperation = "source-over";
        ctx.moveTo(x,y);
        ctx.lineTo(x+w,y);
        ctx.lineTo(x+w,y+h);
        ctx.lineTo(x,y+h);
        ctx.lineTo(x,y);
        ctx.stroke();
        ctx.closePath();
        clipArea = {
            x,
            y,
            w,
            h
        };
    }
    function startClip(area){
        var canvas = document.createElement("canvas");
        canvas.width = area.w;
        canvas.height = area.h;

        var data = clipCtx.getImageData(area.x,area.y,area.w,area.h);

        var context = canvas.getContext("2d");
        context.putImageData(data,0,0);
        return canvas.toDataURL("image/png",1);
    }
},

取消截圖or初始化：

/**
 * 取消截圖
 */
cancelCut(){
    this.draw = false;
    this.init();
},
/**
 * 打開彈窗的時(shí)候初始化
 */
init(){
    // canvas清空畫布
    var wrap = document.getElementById("clip-img-w");
    var width = wrap.offsetWidth;
    var height = wrap.offsetHeight;
    var clipcanvas = document.getElementById("clipcanvas");
    var drawcanvas = document.getElementById("drawcanvas");
    clipcanvas.width = width;
    clipcanvas.height = height;
    drawcanvas.width = width;
    drawcanvas.height = height;
    var clipCtx = drawcanvas.getContext("2d");
    var ctx = clipcanvas.getContext("2d");
    clipCtx.clearRect(0,0,drawcanvas.width,drawcanvas.height);
    ctx.clearRect(0,0,clipcanvas.width,clipcanvas.height);

    //移除鼠標(biāo)事件
    clipcanvas.onmousedown = null;
    clipcanvas.onmousemove = null;
    document.removeEventListener("mouseup",fn(),false);
    function fn(){}

    // 移除創(chuàng)建的img節(jié)點(diǎn),避免重復(fù)創(chuàng)建
    if($('.img_anonymous').length>0){
        $('.img_anonymous').remove();
    }

    //避免同一張圖沒有更新
    this.cutImgSrc = this.imgSrc;
},

部分CSS樣式：

//less
//截圖區(qū)域
>.img_box{
    width: 700px;
    height: 450px;
    position:relative;
    >canvas{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        &#clipcanvas{
            z-index: 2;
        }
        &#drawcanvas{
            z-index: 1;
        }
    }
    //圖片居中顯示
    img{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%;
    }
}

//回顯區(qū)域
>.img_group_item{
    width: 250px;
    height: 250px;
    position: relative;
    margin: 0 auto;
    //圖片居中顯示
    img{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%;
    }
}

讀到這里，這篇“vue項(xiàng)目中怎么使用canvas實(shí)現(xiàn)截圖功能”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。