zoukankan      html  css  js  c++  java
  • 玩转html2canvas以及常见问题解决

    前端小伙伴经常会遇到页面截图或者把网页中指定的区域(某个大div)的内容转换成png的图片。这个时候常常会用到html2canvas库来实现,js真的很强大。

    我最近也遇到了一个需求,需要把输入的文本框里面的文字转换成带有字体样式的图片。于是去研究了一下html2canvas。

    html2canvas官网是:http://html2canvas.hertzen.com/,当前最新版本是1.0.0-rc.7。
    安装方式有三种,第1种是用npm进行安装:

    npm install --save html2canvas
    

    第二种是用yarn,命令如下:

    yarn add html2canvas
    

    第三种是直接下载html2canvas.js或者压缩版本html2canvas.min.js。然后直接script方式引入到需要使用这个js库的html文件中即可。

    官网给的案例如下(usage), 首先是html部分,有一个div:

    <div id="capture" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>
    </div>
    

    js部分如下:

    html2canvas(document.querySelector("#capture")).then(canvas => {
        document.body.appendChild(canvas)
    });
    

    这段代码就是把id为capture的div传给html2canvas,回调中的canvas是被捕获的div对象。
    如果要把这个div转换成图片,则还需要增加如下代码:

    html2canvas(document.querySelector("#capture")).then(canvas => {
        document.body.appendChild(canvas);
        // 新增代码 返回图片的URL,设置为png格式
        var dataUrl = canvas.toDataURL("image/png")
    });
    

    上面代码中的dataUrl是一个base64编码的图片URL地址。
    在我的需求中,我需要把这个图片资源保存到服务器中,所以需要在后面发起一个ajax请求(或者post请求)到后端服务,后端接口需要接收这个dataURL,先base64解码,然后再把解码后的图片内容写入到png格式的文件中。
    大致代码如下:

    public function saveCustomTextToImage(Request $request) {
            $imageDataURL = $request->input('dataUrl');
            $encodeImage = explode(",", $imageDataURL)[1];
            // 解码
            $decodeImage = base64_decode($encodeImage);
            $storePath = "./img/my-pic.png";
            // 写入文件
            file_put_contents($storePath, $decodeImage);
            $resArray['success'] = true;
            $resArray['url'] = "testme";
            return response()->json($resArray);
        }
    

    如果是不想传给后端处理,想直接跳转浏览器下载,那么之前的js部分的代码可以改为:

    html2canvas(document.querySelector("#capture")).then(canvas => {
        document.body.appendChild(canvas);
        // 新增代码 返回图片的URL,设置为png格式
        var dataUrl = canvas.toDataURL("image/png");
        var downloadUrl = dataUrl.replace("image/png","image/octet-stream");//图片地址
        
        window.location.href = downloadUrl; // 跳转下载
    });
    

    常规玩法说完了,下面说一下常见的坑。
    第一个我遇到的就是版本造成的api调用的问题,从上面的js代码可以看出最新的html2canvas是基于Promise实现的,所以可以用".then"的方式进行链式调用。而老版本的html2canvas只能用传统回调方式来写,我的同事就是用的0.4.1版本,所以他的写法和我不一样,如下所示:

    html2canvas([document.getElementById('mydiv')], {
        onrendered: function(canvas) {
           document.body.appendChild(canvas);
           var data = canvas.toDataURL('image/png');
           // AJAX call to send `data` to server
        }
    });
    
    

    第二个遇到的问题是没有任何报错的前提下,生成的图片是空白的。国内的童鞋们对这个问题往往说是去设置初始化选项,就可以解决带有滚动条的页面截取出空白的问题。众所纷纭,还有人说要给被选中的div设置宽高才行。
    然而我采用这种方法没有解决问题,Google了很久发现国外的开发真正解决了这个问题。其实还是和版本有关,将最新的版本降会1.0.0rc.0版本就可以了。
    希望官方早点解决这个问题,不然强制降版本也不是个事儿啊。

  • 相关阅读:
    移动零【283】
    下一个排列【31】
    插入区间【57】
    有效的山脉数组【941】
    两个数组的交集【349】
    求根到叶子节点数字之和【129】
    解决已经pip 安装成功的第三方包,但总是标红或者运行报错import PendingDeprecationWarning
    String、StringBuffer与StringBuilder之间区别
    《Java 核心技术第 10 版》-- 读书笔记
    【转载】如何保证消息不被重复消费?
  • 原文地址:https://www.cnblogs.com/freephp/p/14952588.html
Copyright © 2011-2022 走看看