溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html2canvas實現(xiàn)保存網(wǎng)頁為圖片，canvas2image解決圖片模糊問題

發(fā)布時間：2020-07-22 09:28:03 來源：網(wǎng)絡(luò) 閱讀：6322 作者：取什么昵稱 欄目：web開發(fā)
  1. 下載canvas2image.js和html2canvas.js文件，百度官方即可下載
  2. 具體代碼如下
<body>
            <div class="card-bg">
            </div>
</body>

$(function() {
            var canvas2 = document.createElement("canvas");
            let _canvas = document.querySelector('.card-bg');//需要替換成圖片的html區(qū)域
            //獲取寬高
            var w = parseInt(window.getComputedStyle(_canvas).width);
            var h = parseInt(window.getComputedStyle(_canvas).height);
            //將canvas畫布放大若干倍，然后盛放在較小的容器內(nèi)，就顯得不模糊了
            canvas2.width = w * 2;
            canvas2.height = h * 2;
            canvas2.style.width = w + "px";
            canvas2.style.height = h + "px";
            //可以按照自己的需求，對context的參數(shù)修改,translate指的是偏移量
            //  var context = canvas.getContext("2d");
            //  context.translate(0,0);
            var context = canvas2.getContext("2d");
            context.scale(1.85, 1.7);
            html2canvas(_canvas,{canvas:canvas2}).then(function(canvas) {
                var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 獲取生成的圖片的url
                $(".card-bg").html('<img class="down" src="'+imgUri+'" >');
            })
        });
向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手