html2canvas完整demo解决图片跨域问题(已经成功啦啦)

实现html内容转成图片格式

搞这个东西之前尝试过好多种方法,包括canvas画图,php gd2画图,画的我怀疑人生,我就想实现一个大概名片的效果,不用太炫酷,最后还是选择用html2canvas,但是遇到的问题还是图片的跨域问题,因为跨域问题,需要代理服务器设置header,我迟点说,我的demo是在本地服务器上测的,就是127.0.0.1这个。
赶紧贴一波代码:
css:

 *{
                margin: 0;
                color:#3a3a3a;
            }
            #content{
                padding:10px;
            }

            .test{
                width: 322px;
                height: 496px;
                text-align: center;
                border:1px solid #c0c0c0;
                background:#fff;
                margin-top: 1px;
                margin-left: 1px;               

            }
            canvas{                
                margin-top: -459px;
                margin-right: 5px;
                margin-left: 500px;
            }
            .down{
                float: left;
                margin: 0px 10px;
            }
            .header{
                border-bottom: 1px solid #c0c0c0;
                text-align: center;                
                padding-top: 10px;
            }
            .header>div{
                width: 164px;
                margin: 0 auto;
            }
            .header img{
                width: 29px;
                float: left;
                margin-right: -10px;
            }
            .header p{
                padding-bottom: 12px;
                padding-top: 7px;
            }
            .main{                
                text-align: center;
            }
            .main p:first-child{
                font-size: 20px;
                color:#969696;
                margin-top: 20px;
                margin-bottom: 20px;
            }
            .main p:last-child{
                margin-top: 20px;
                margin-bottom: 20px;
            }
            .main :last-child .id{
                color:#e67d2c;
                display:inline-block;
                margin-right: 4px;

            }
            .footer{
                background:#D7D7D7;
                text-align: center;                
                height: 100px;
                padding-bottom: 10px;
            }
             .footer>div>div{
                float:left;
            }
            .footer>div>div.pic{
                width: 70px;
                height: 70px;
                border-radius: 10px;
                margin: 10px;
                margin-right: 0;
                margin-left: 0;
                background:#fff;
            }
            .footer>div{
              padding: 10px 22px;          
            }
            .footer>div>div ul{
               list-style: none;
               padding-left: 22px;                
            }
            .footer>div>div ul li{
               margin-top: 5px; 
               text-align: left;             
            }
            .footer>div>div ul li span{
                display: inline-block;
               margin-left:15px;              
            }
            .copy{
                clear: both;
                margin-top: 19px;
            }

html:

<body>
    <div id="content">
        <div class="test">
        <div class="header">
            <div>
                <img src="u26.png" crossorigin="anonymous">
                <p>****麻将p>
            div>
        div>
        <div class="main">
            <p>长按二维码下载游戏p>
            <img src="u27.png" class="code" crossorigin="anonymous">
            <p>绑定推广员ID <span class="id">824996span>马上领礼包!p>
        div>
        <div class="footer">
            <div>
                <div class="pic">
                    <img src="">
                div>
                <div>
                    <ul>
                        <li>昵     称:<span>天府雀神span>li>
                        <li>推广ID:<span>824996span>li>
                        <li>微信号:<span>wyscmi007span>li>
                    ul>
                div>
            div>
        div>
    div>    
    div>  


    <div class="copy">
    <button onclick="copy()">截图button>
    <a class="down" href="" download="downImg">下载a>

    div>

最关键的部分当然是js了,首先我们在外部引入html2canvas.js

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js">script>

然后接下来,还是js

<script>
    var pic;
    var canvas2 = document.createElement("canvas");
    let _canvas = document.querySelector('.test');
    var w = parseInt(window.getComputedStyle(_canvas).width);
    var h = parseInt(window.getComputedStyle(_canvas).height);
    //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
    canvas2.width = w * 2;
    canvas2.height = h * 2;
    canvas2.style.width = w + "px";
    canvas2.style.height = h + "px";
    //可以按照自己的需求,对context的参数修改,translate指的是偏移量   
    var context = canvas2.getContext("2d");
    context.scale(2,2);
     html2canvas(document.querySelector('.test'),{canvas:canvas2}).then(function(canvas) {            
            pic=canvas;
            //canvas转换成url,然后利用a标签的download属性,直接下载,绕过上传服务器再下载
            document.querySelector(".down").setAttribute('href',canvas.toDataURL());
     });
     //点击的时候把图片复制到下面那个div下
      function copy(){
                 document.querySelector(".copy").appendChild(pic);            
            }
            script>

然后效果,是这样,
html2canvas完整demo解决图片跨域问题(已经成功啦啦)_第1张图片
按下截图后
html2canvas完整demo解决图片跨域问题(已经成功啦啦)_第2张图片

最后,图片的跨域问题,网上说的是,图片加上这个,但是怎么试怎么不行,解决方法是也要在在跨域的服务器上设置header设置为允许跨域请求
access-control-allow-origin: * access-control-allow-credentials: true。
如果你的问题也解决了,记得给我一个赞哟。

你可能感兴趣的:(canvas)