????<section class="page page4-star" style="z-index: 2;">
? ? ? ? ? ? ? ? <div class="page4-group2">
? ? ? ? ? ? ? ? ? ? <div class="page4-img-group1" id="page4-img-group" style="top:0;z-index: -1;">
? ? ? ? ? ? ? ? ? ? ? ? <img class="page5-logo" src="img/page5_logo.png" alt="">
? ? ? ? ? ? ? ? ? ? ? ? <div class="page4-img-bg">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img id="page5_field_bg" src="img/page4_field_bg1.png" alt="">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="page4-car-bg">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img id="page5-car-img" src="img/page4_car_bg1.png" alt="">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="page4-sticker-bg">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img id="page5-sticker-img" src="img/page4_sticker_bg1.png" alt="">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="page4-declaration-bg" id="page5-declaration-bg">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="page5-record">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p id="page5-personnel-num"></p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img class="page5-code" src="img/page5_code.png" alt="">
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </section>
<section class="main-container">
? ? <footer class="footer-center">
? ? ? ? <button class="btn-share" style="position: fixed;bottom: 0;z-index: 9999;" id="btnShare">截 圖</button>
? ? </footer>
</section>
<img id="save" />
function $(selector) {
? ? ? ? return document.querySelector(selector);
? ? }
? ? var main = {
? ? ? ? init:function(){
? ? ? ? ? ? main.setListener();
? ? ? ? },
? ? ? ? //設(shè)置監(jiān)聽事件
? ? ? ? setListener:function(){
? ? ? ? ? ? var btnShare = document.getElementById("btnShare");
? ? ? ? ? ? btnShare.onclick = function(){
? ? ? ? ? ? ? ? main.html2Canvas();
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? //獲取像素密度
? ? ? ? getPixelRatio:function(context){
? ? ? ? ? ? var backingStore = context.backingStorePixelRatio ||
? ? ? ? ? ? ? ? ? ? context.webkitBackingStorePixelRatio ||
? ? ? ? ? ? ? ? ? ? context.mozBackingStorePixelRatio ||
? ? ? ? ? ? ? ? ? ? context.msBackingStorePixelRatio ||
? ? ? ? ? ? ? ? ? ? context.oBackingStorePixelRatio ||
? ? ? ? ? ? ? ? ? ? context.backingStorePixelRatio || 1;
? ? ? ? ? ? return (window.devicePixelRatio || 1) / backingStore;
? ? ? ? },
? ? ? ? //繪制dom 元素，生成截圖canvas
? ? ? ? html2Canvas: function () {
? ? ? ? ? ? var shareContent = $("#page4-img-group");// 需要繪制的部分的 (原生）dom 對(duì)象 ，注意容器的寬度不要使用百分比，使用固定寬度，避免縮放問(wèn)題
? ? ? ? ? ? var width = shareContent.offsetWidth;? // 獲取(原生）dom 寬度
? ? ? ? ? ? var height = shareContent.offsetHeight; // 獲取(原生）dom 高
? ? ? ? ? ? var offsetTop = shareContent.offsetTop;? //元素距離頂部的偏移量
? ? ? ? ? ? var canvas = document.createElement('canvas');? //創(chuàng)建canvas 對(duì)象
? ? ? ? ? ? var context = canvas.getContext('2d');
? ? ? ? ? ? var scaleBy = main.getPixelRatio(context);? //獲取像素密度的方法 (也可以采用自定義縮放比例)
? ? ? ? ? ? console.log(scaleBy);
? ? ? ? ? ? scaleBy = 3;
? ? ? ? ? ? canvas.width = width * scaleBy;? //這里 由于繪制的dom 為固定寬度，居中，所以沒(méi)有偏移
? ? ? ? ? ? canvas.height = (height + offsetTop) * scaleBy;? // 注意高度問(wèn)題，由于頂部有個(gè)距離所以要加上頂部的距離，解決圖像高度偏移問(wèn)題
? ? ? ? ? ? context.scale(scaleBy, scaleBy);
? ? ? ? ? ? var opts = {
? ? ? ? ? ? ? ? allowTaint:true,//允許加載跨域的圖片
? ? ? ? ? ? ? ? tainttest:true, //檢測(cè)每張圖片都已經(jīng)加載完成
? ? ? ? ? ? ? ? scale:scaleBy, // 添加的scale 參數(shù)
? ? ? ? ? ? ? ? canvas:canvas, //自定義 canvas
? ? ? ? ? ? ? ? logging: true, //日志開關(guān)，發(fā)布的時(shí)候記得改成false
? ? ? ? ? ? ? ? width:width, //dom 原始寬度
? ? ? ? ? ? ? ? height:height //dom 原始高度
? ? ? ? ? ? };
? ? ? ? ? ? html2canvas(shareContent, opts).then(function (canvas) {
? ? ? ? ? ? ? console.log("html2canvas");
? ? ? ? ? ? ? alert(canvas.toDataURL())
? ? ? ? ? ? ? ? var body = document.getElementsByTagName("body");
? ? ? ? ? ? ? ? canvas.style.width = canvas.width / scaleBy + "px";
? ? ? ? ? ? ? ? canvas.style.height = canvas.height / scaleBy + "px";
//? ? ? ? ? ? ? body[0].appendChild(canvas);
? ? ? ? ? ? ? ? var src = canvas.toDataURL();
? ? ? ? ? ? ? ? var img = document.getElementById("save");
? ? ? ? ? ? ? ? save.src = src;
? ? ? ? ? ? ? ? save.style.width? = canvas.style.width;
? ? ? ? ? ? ? ? save.style.height? = canvas.style.height;
//? ? ? ? ? ? ? console.log(src);
? ? ? ? ? ? });
? ? ? ? }
? ? };
? ? //最后運(yùn)行代碼
? ? main.init();
把代碼放到服務(wù)器上可生成圖片成功
