html长按保存图片-使用html2canvas

官网

http://html2canvas.hertzen.com/

引用html2canvas.min.js

版本1:带保存

 

<div class="g-view code" id="demo">

 <script src="/CMSScripts/Custom/Demo/html2canvas.min.js"></script>

 function jsFun(){

        html2canvas( $("#demo")[0], {
            useCORS: true,
            allowTaint: false
        }).then(function (canvas) {
            var url = canvas.toDataURL("image/png");
            var oA = document.createElement("a");
            oA.download = '测试截图';// 设置下载的文件名，默认是'下载'
            oA.href = url;
            document.body.appendChild(oA);
            oA.click();
            oA.remove(); // 下载之后把创建的元素删除

        });
    }

 

 

 

 

 

版本2

<div class="g-view code" id="demo">
    <img src="/images/adtitle.png" class="adtilte">
    <img src="/images/adtop.png" class="adtop">
    <div class="code-content">
        <img  src="/images/adbottom.png" class="adtop">
        <div id="picurl" class="codeinfo">
            <img src="xxxxx" class="codeimg" />        
        </div>
        <div >长按我保存图片</div>
    </div>

</div>

<script src="/CMSScripts/Custom/Demo/html2canvas.min.js"></script>

<script type="text/javascript">
    var timeOutEvent=0;
    $(function(){
        $("#demo").on({
            touchstart: function(e){
                timeOutEvent = setTimeout("longPress()",500);
                e.preventDefault();
            },
            touchmove: function(){
                clearTimeout(timeOutEvent);
                timeOutEvent = 0;
            },
            touchend: function(){
                clearTimeout(timeOutEvent);
                if(timeOutEvent!=0){
                   // alert("你这是点击，不是长按");
                }
                return false;
            }
        })
    });


    function longPress(){
        timeOutEvent = 0;

        var shareContent = $("#demo")[0];
        var width = shareContent.offsetWidth;
        var height = shareContent.offsetHeight;
        var canvas = document.createElement("canvas");
        var context = canvas.getContext('2d');
        // var scale = getPixelRatio(context);    //将canvas的容器扩大PixelRatio倍，再将画布缩放，将图像放大PixelRatio倍。
        canvas.width = width;// * scale;
        canvas.height = height;// * scale;
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';
        // context.scale(scale, scale);

        var opts = {
            // scale: scale,
            canvas: canvas,
            width: width,
            height: height,
            dpi: window.devicePixelRatio
        };
        html2canvas(shareContent, opts).then(function (canvas) {
            context.mozImageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;
            var dataUrl = canvas.toDataURL('image/jpeg', 1.0);
            preView(dataUrl);
            // window.location.href= dataUrl;
            //  var newImg = document.createElement("img");
            //  newImg.src =  dataUrl;
            //  newImg.width = width;
            //  newImg.height= height;

            //  $("body")[0].appendChild(newImg);
        });

      //  alert("长按事件触发发");
    }

  function  preView (content) {
        var string = content
        var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"
        var x = window.open('','_self')
        x.document.open()
        x.document.write(iframe)
        x.document.close()
    }
</script>