【實戰技能】移動端限制拖拽和點擊截屏

實現移動端限制拖拽和點擊截屏；

拖拽使用：touchstart、touchmove、touchend，部分手機拖拽有些卡，體驗有些差，估計是手勢原因；

點擊截圖：html2canvas、canvas2image，部分手機無法保存，圖片爲base64格式；

效果圖：

 

痘痘主要頁面：

<div id="ddArea"></div>
<div id="id1"><img src="images/page4_fc.png"></div>
<div id="id2"><img src="images/page4_qz.png"></div>
<div id="id3"><img src="images/page4_nz.png"></div>
<div id="id4"><img src="images/page4_dt.png"></div>
<div class="jtBt" onclick="takeScreenshot()">
<img src="images/ddGame_cnbz.png">
</div>
<div class="nextTC"><img src="images/ddGame_dzfn.png"></div>

生成截圖頁面

<div id="show">
    <div class="show_bg"></div>
    <div class="show_content">
        <!--<img 這裏會生成圖片 />-->
        <div class="jtTip">
            <p>長按圖片進行保存</p>
            <p>若保存圖片失敗，請手動截屏！</p>
        </div>
        <div class="closeIMg"><img src="images/closeImg.png"></div>
    </div>
</div>

拖拽的JS：

    //阻止瀏覽器下拉事件
    $('body').on('touchmove', function (event) {
        event.preventDefault();
    });

    function tzFun(id) {
        var _x_start, _y_start, _x_move, _y_move, _x_end, _y_end, left_start, top_start;
        var yd = document.getElementById(id);
        var node = document.getElementById("ddArea");
        var tzX = node.offsetLeft;
        var tzY = node.offsetTop;
        var tzWidth = node.clientWidth;
        var tzHeight = node.clientHeight;
        var ydX = yd.offsetLeft;
        var ydY = yd.offsetTop;
        var ydWidth = yd.clientWidth;
        var ydHeight = yd.clientHeight;

        document.getElementById(id).addEventListener("touchstart", function (e) {
            _x_start = e.touches[0].pageX;
            _y_start = e.touches[0].pageY;
            //console.log("start",_x_start,"start",_y_start);
            left_start = $("#" + id).css("left");
            top_start = $("#" + id).css("top");
        });
        document.getElementById(id).addEventListener("touchmove", function (e) {
            _x_move = e.touches[0].pageX;
            _y_move = e.touches[0].pageY;
            // console.log("move",_x_move)
            $("#" + id).css("left", parseFloat(_x_move) - parseFloat(_x_start) + parseFloat(left_start) + "px");
            $("#" + id).css("top", parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start) + "px");
            //console.log(parseFloat(_y_move) - parseFloat(_y_start) + parseFloat(top_start));
        });

        document.getElementById(id).addEventListener("touchend", function (e) {
            var _x_end = e.changedTouches[0].pageX;
            var _y_end = e.changedTouches[0].pageY;
            var aw = tzX + tzWidth - Math.floor(ydWidth / 2);
            var bw = tzY + tzHeight - Math.floor(ydHeight / 2);
            //console.log("限制範圍：x:", tzX, "--", aw, "y:", tzY, "--", bw, "當前：x=", _x_end, "y=", _y_end);
            if (tzX <= _x_end && aw >= _x_end && tzY <= _y_end && bw >= _y_end) {

            } else {
                alert("請將痘痘放於臉部！");
                $("#" + id).css("left", ydX + "px");
                $("#" + id).css("top", ydY + "px");
            }
        })

點擊生成圖片的JS：

function takeScreenshot() {  //觸發生成截圖的方法，以chooses爲截圖區域
        var shareContent = document.getElementById('page4');
        var width = shareContent.offsetWidth;
        var height = shareContent.offsetHeight;
        var canvas = document.createElement("canvas");
        var scale = 1;  //控制圖片的大小
        canvas.width = width * scale;
        canvas.height = height * scale;
        canvas.getContext("2d").scale(scale, scale);
        var opts = {
            scale: scale,
            canvas: canvas,
            logging: true,
            width: width,
            height: height
        };
        html2canvas(shareContent, opts).then(function (canvas) {
            var context = canvas.getContext('2d');
            var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
            $('.show_content').prepend(img); //創建img並插入展示div
            $('#show').show();
        });
 }