canvas 实现某一个区域截图保存

  • 项目中用到编辑文字,图片,最后要预览成一张图片,因为后台不提供接口,只能自己去实现如何去保存这些数据,并且能存成一张图片达成预览效果图。
  • 代码如下:
* 1.先页面引入html2canvas.min.js(可以去github下载),我是直接引进链接地址的
    * <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
     * html代码   
         <a type="button" id="down_button"><button id="creat">点击复制图片</button></a>
        <div class="imgBox" style="position:relative;">
            <img src="body_background.jpg">
            <span>我是内容</span>
        </div>  
    * js 代码
   $("#creat").click(function(){        
         html2canvas($(".imgBox"),{ // $(".imgBox")是你要复制生成canvas的区域,可以自己选
             onrendered:function(canvas){
                    dataURL =canvas.toDataURL("image/png");
                     $("body").append(canvas); //直接在页面会把生成的这张图片的显示出来
                      console.log(dataURL); 
                                 / /下载图片(可以把生成的这张图片下载下来)
                               $('#down_button').attr( 'href' ,  dataURL ) ;
                               $('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
                       sessionStorage.setItem("positive",dataURL);
                        setTimeout(function(){
                             /*做一些处理*/
                          },3000)
                      },
                      width:678,
                      height:404
         })     
     })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。