我正在尝试将html转换为bmp，网上查了一下，好像没有直接转换的方法!所以，我尝试使用canvas JS将html转换为png，然后使用php将文件从PNG转换为BMP。我有关于将图像文件保存到 canvas JS 的 localhost 文件夹的问题，你能帮忙吗？ 另一方面，如果你有更好的方法将 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>
最佳答案
我找到了解决方案，我正在使用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');
关于javascript - 使用 Canvas2image 将 HTML 转换为 PNG，然后将 PNG 转换为 BMP，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58566758/