html2canvas 实现长按截图保存

灰太狼 2021-09-08 15:12 606阅读 0赞

$.fn.longPress = function(fn){
        let timeout = 0;//控制时间
        const $this = this;
        for(let i=0;i<$this.length;i++){
            $this.addEventListener('touchstart',()=>{
                timeout = setTimeout(fn,800);
            },false)
            $this.addEventListener('touchend',()=>{
                clearTimeout(timeout)
            },false)
        }
    };
    
    $('.imgitem').longPress(()=>{
        saveImg();
    })
    
    saveImg=()=>{
        // 获取将要保存的图片节点
        const dom = document.querySelector('img');
        // 创建一个新的画布
        const Canvas = document.createElement('canvas');
        const width = document.body.offsetWidth;
        const height = document.body.offsetHeight;
        const scale = window.devicePixelRatio;//设备的devicePixelRatio
    
        Canvas.width = width*scale;
        Canvas.height = height*scale;
        Canvas.getContext('2d').scale(scale,scale);
    
        html2canvas(dom,{
            canvas:Canvas,
            scale,
            useCORS:true,
            logging:true,
            width:width+"px",
            height:height+"px"
        }).then((canvas)=>{
            const context = canvas.getContext('2d');
            //关闭抗锯齿形
            context.mozImageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;
    
            //canvas转化为图片
            const img = canvas2Image(canvas, canvas.width, canvas.height);
            img.style.cssText = "width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;";
        })
    }
    
    canvas2Image=(canvas, width, height)=> {
        const retCanvas = document.createElement('canvas');
        const retCtx = retCanvas.getContext('2d');
        retCanvas.width = width;
        retCanvas.height = height;
        retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height);
        const a = document.createElement('a');
              a.href = retCanvas.toDataURL('image/jpeg'||'image/png');  // 可以根据需要更改格式
        return a;
      }