使用Canvas2image将HTML转换为PNG，然后将PNG转换为BMP

Question

我正在尝试将html转换为bmp，在网上检查后，似乎没有直接的转换方法！因此，我尝试使用canvas JS将html转换为png，然后使用php将文件从PNG转换为BMP。我有问题保存图像文件到本地主机文件夹在画布JS，你能帮助吗？另一方面，如果你有更好的方法将html转换成bmp。请让我知道!非常感谢！

参考链接:https://github.com/usecodelee/JavaScript-screenshot

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            padding: 20px;
            border: 5px solid black;
        }

        h2 {
            background: #efefef;
            margin: 10px;
        }

        .toPic {
            display: none;
        }
    </style>
</head>

<body>
    <h2>原始HTML</h2>
    <div style="background:red;width: 600px;" class="test">
        <div style="background:green;">
            <div style="background:blue;">
                <div style="background:yellow;">
                    <div style="background:orange;">
                        33333333333333333333333333333333
                    </div>
                </div>

            </div>

        </div>
    </div>
    <h2 class="toCanvas"> <a href="javascript:void(0);"> 转成canvas </a></h2>
    <h2 class="toPic"><a href="javascript:void(0);"> 转成图片 </a></h2>
    <h5>
        <label for="imgW">宽度:</label>
        <input type="number" value="" id="imgW" placeholder="默认是原图宽度" />
        <label for="imgH">高度:</label>
        <input type="number" value="" id="imgH" placeholder="默认是原图高度" />
        <label for="imgFileName">文件名:</label>
        <input type="text" placeholder="文件名" id="imgFileName" />
        <select id="sel">
                    <option value="png">png</option>
                    <option value="jpeg">jpeg</option>
                    <option value="bmp">bmp</option>
                </select>
        <button id="save">保存</button>
    </h5>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript" src="html2canvas.min.js"></script>
    <script type="text/javascript" src="canvas2image.js"></script>
    <script type="text/javascript">
        var test = $(".test").get(0); //将jQuery对象转换为dom对象


            // 调用html2canvas插件
            html2canvas(test).then(function(canvas) {
                // canvas宽度
                var canvasWidth = canvas.width;
                // canvas高度
                var canvasHeight = canvas.height;
                // 渲染canvas
                $('.toCanvas').after(canvas);
                // 显示‘转成图片’按钮
                $('.toPic').show(1000);


                    // 调用Canvas2Image插件
                    var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
                    // 渲染图片
                    $(".toPic").after(img);

                        let type = $('#sel').val(); //图片类型
                        let w = $('#imgW').val(); //图片宽度
                        let h = $('#imgH').val(); //图片高度
                        let f = $('#imgFileName').val(); //图片文件名
                        w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空，为空时保持原来的值
                        h = (h === '') ? canvasHeight : h;
                        // 调用Canvas2Image插件
                        Canvas2Image.saveAsImage(canvas, w, h, type, f);  // Here will download , i will to save file in local folder




            });

    </script>
</body>

</html>

Answer 1

我找到了解决方案，我正在使用ajax上传回服务器文件夹。下面是代码。谢谢!

Javascript

var image_data = $(img).attr('src');
                        var baseimg='';
                        baseimg=image_data.replace(/\&/g,"%26");
                        baseimg=baseimg.replace(/\+/g,"%2B");
                        //imgData = getBase64Image(image_data);
                        $.ajax({
                            type: "POST",
                            url: "uploadimage.php",
                            data: {file : image_data} , // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                            dataType: 'text',
                            success: function(data) {


                                $("#msg").html(
                                    '<div class="alert alert-info"><i class="fa fa-exclamation-triangle"></i> UPLOAD OK!</strong>.</div>' + image_data
                                    );

                            },
                            error: function(data) {
                                $("#msg").html(
                                '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> There is some thing wrong.</div>'
                                );
                            }
                        });

PHP

$base64_string = $_REQUEST['file'];

$output_file ="imagetag.png";

$file = fopen($output_file, "wb");

    $data = explode(',', $base64_string);

    fwrite($file, base64_decode($data[1]));
    fclose($file);
    //$imageObject = imagecreatefrompng($output_file);
    imagewbmp($output_file,  'testbmp.bmp');