js 用canvas截取图片并返回base64编码的url

最新推荐文章于 2024-07-22 18:18:11 发布

wangqin5436

最新推荐文章于 2024-07-22 18:18:11 发布

阅读量2.2k

点赞数 1

分类专栏： js代码段文章标签： js canvas base64 截图

本文链接：https://blog.csdn.net/wangqin5436/article/details/82692543

版权

js代码段专栏收录该内容

2 篇文章 0 订阅

订阅专栏

//canvas截取图片

    canvasImg(data){
        var canvas1 = document.getElementById("canvas")
        canvas1.width = this.imgWidth;
        canvas1.height = this.imgHeight;
        var cxt1 = canvas1.getContext("2d")
        var img = new Image();
        img.src = this.dataReturnImg;
        var canvas2 = document.createElement("canvas")
        var cxt2=canvas2.getContext("2d")
        img.onload = function(){
            cxt1.drawImage(img,0,0,canvas1.width,canvas1.height)；
            canvas2.width = data.w;
            canvas2.height = data.h;
             // 方法一
             var dataImg = cxt1.getImageData(data.x,data.y,data.w,data.h) //画框的坐标宽高
             var dataImg = cxt1.getImageData(0,0,300,300)
            cxt2.putImageData(dataImg,0,0,0,0,canvas2.width,canvas2.height)
            //方法二 
            // cxt2.drawImage(img,data.x,data.y,data.w,data.h,0,0,data.w,data.h);
            var img2 = canvas2.toDataURL("image/png");
            console.log(img2)
        }
    },