将图像存储到 png 文件中
Storing Image into png file
我想使用javascript将网页存储到png文件中。我对下面的示例代码感到厌倦。但问题是当我下载时,它的下载扩展名image/octet-stream
但在下载文件期间,我想以 png 格式存储图像。如何将图像从图像/八位字节流扩展下载到 png 扩展。法典:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>html2canvas example</title>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/excanvas.js"></script>
<style>
canvas{border:1px solid #222}
</style>
</head>
<body id="target">
<a class="upload" >Upload to Imgur</a>
<a href="#" download="testXXX.jpg" onclick="printImg()" ><img src="images/print-icon.png" alt="Print" width="16" height="16" ></a>
<h2>this is <b>bold</b> <span style="color:red">red</span></h2>
<p> Feedback form with screenshot This script allows you to create feedback forms which include a screenshot,
created on the clients browser, along with the form.
The screenshot is based on the DOM and as such may not be 100% accurate to the real
representation as it does not make an actual screenshot, but builds the screenshot based on the
information available on the page. How does it work? The script is based on the html2canvas library,
which renders the current page as a canvas image, by reading the DOM and the different styles applied
to the elements. This script adds the options for the user to draw elements on top of that image,
such as mark points of interest on the image along with the feedback they send.
It does not require any rendering from the server, as the whole image is created on the clients browser.
No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
</p>
<script type="text/javascript">
function printImg(){
html2canvas( [ document.body ],{
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png").replace("image/png","image/octet-stream;base64");
window.location.href=img;
}
});
}
</script>
</body>
</html>
恐
怕这就是DataURL的工作方式。
请参阅以下问题以获取带有有点丑陋解决方案的答案:
使用"打开方式"对话框命名从画布保存的 PNG 文件
(答案中的 href 将指向 JavaScript 中的 'img' var(
相关文章:
- ng文件上传获胜't将jpg图像转换为png
- 将图像的来源与 png 文件进行比较
- 浏览器抛出错误:解析文件时出现意外字符 ' ' (1:0):图像.png
- 将Base64转换为R格式的PNG/JPEG文件
- 如何使用JavaScript在Internet Explorer中将文件(DOCX或XLSX或PNG)读取为二进制流
- 使用PHP将png/svg导出为单个png文件
- 节点画布:将PNG文件输出为交错/逐行扫描
- 如何使用纯javascript或jQuery将HTML5画布屏幕作为png图像保存到项目的特定文件夹中
- 图像(jpeg 和 png)文件如何在 SVG 文件中格式化
- iPhone应用程序或移动野生动物园的动画PNG文件的替代方案,目标是模拟短视频剪辑的即时播放
- jsPDF 不完整或损坏的 PNG 文件
- 将用Javascript绘制的外部SVG文件导出为PNG图像
- CasperJS屏幕截图未将图像渲染为png文件
- 将图像存储到 png 文件中
- SVG文件 :如何使用Inkscape将PNG文件转换为SVG文件后获取路径标记数据
- 从Base64字符串转换为PNG文件
- 如何将HTML转换为HTML5画布并下载为PNG文件
- Amchart-导出到PNG文件
- 如何将.PNG文件转换为可以存储在mysql中并通过CSS调用的源代码;png”;
- 如何用javaScript在图片文件(png)中添加文本