知识学堂 > 课程 > 长按保存图片 需要保存图片不在0,0原点

长按保存图片 需要保存图片不在0,0原点

发布日期:2022/3/10 来源:聚恒【返回】

<script src="js/html2canvas.js"></script>
    <script src="js/canvas2image.js"></script>
    <script>
        var timer = setInterval(function () {
            //判断图片加载完没
            if (document.getElementById('img1').complete) {
                clearInterval(timer);

                $(function () { var canvas2 = document.createElement("canvas");
                    var _canvas = document.querySelector('.Share'); //需要替换成图片的html区域
                    //获取宽高
                    var w = parseInt(window.getComputedStyle(_canvas).width);
                    var h = parseInt(window.getComputedStyle(_canvas).height);
                    
                    //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
                    canvas2.width = w * window.devicePixelRatio;
                    canvas2.height = h * window.devicePixelRatio;
                    canvas2.style.width = w + "px";
                    canvas2.style.height = h + "px";


//window.devicePixelRatio 根据浏览器在手机屏幕放大倍数

                    //可以按照自己的需求,对context的参数修改,translate指的是偏移量
                    //  var context = canvas.getContext("2d");
                    //  context.translate(0,0);
                    var context = canvas2.getContext("2d");
                    // context.translate(1,1);
                    context.scale(window.devicePixelRatio, window.devicePixelRatio);
                    context.translate(-window.screen.width * 0.1, -window.screen.height * 0.02);//用于需要截图的不是全屏的情况
            
                  


                    html2canvas(_canvas, { canvas: canvas2 }).then(function (canvas) {
                        var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
                        $(".Share").html('<img class="down" src="' + imgUri + '" style="width:' + w + 'px;">');
                    })
                });




                console.log(window.devicePixelRatio)
                console.log(document.getElementById('img1').complete)//js输出
            }
        }, 10);
    </script>