- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 svg 文件,它正在生成 dataURI-png 并且效果很好。我希望将该 dataURI 保存为图像,因此我尝试通过 ajax 将 dataURI 发送到另一个可以执行 PHP 的服务器。但我无法让它工作。
这是生成 dataURI 的代码(有效)
var mySVG = document.querySelector('svg'), // Inline SVG element
tgtImage = document.querySelector('.tgtImage'); // Where to draw the result
can = document.createElement('canvas'), // Not shown on page
ctx = can.getContext('2d'),
loader = new Image; // Not shown on page
console.log(mySVG);
loader.width = can.width = tgtImage.width;
loader.height = can.height = tgtImage.height;
loader.onload = function(){
ctx.drawImage( loader, 0, 0, loader.width, loader.height );
tgtImage.src = can.toDataURL("image/png");
};
这是将其发送到外部 php 服务器的 ajax 代码:
$.ajax({
type: "POST",
data: {id:'testID',datauri: can.toDataURL("image/png")},
crossDomain: true,
//dataType: "jsonp",
url: "https://urltoscript.php",
success: function (data) {
console.log(data);
},
error: function (data) {
console.log(data);
}
});
生成 png 的 PHP 代码
$dataUrl = $_REQUEST['datauri'];
$id = $_REQUEST['id'];
list($meta, $content) = explode(',', $dataUrl);
$content = base64_decode($content);
file_put_contents('./tmp-png/'.$id.'.png', $content);
手动插入 dataURI 时 PNG 生成工作。但它不能与上面的ajax功能一起使用。
谢谢!
最佳答案
您可以使用canvas.toBlob()
,将图像作为 Blob
发送到 php
,使用 php://input
要在 php
读取 Blob
,请参阅 Beyond $_POST, $_GET and $_FILE: Working with Blob in JavaScript and PHP
JavaScript
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
value: function (callback, type, quality) {
var binStr = atob( this.toDataURL(type, quality).split(",")[1] ),
len = binStr.length,
arr = new Uint8Array(len);
for (var i=0; i<len; i++ ) {
arr[i] = binStr.charCodeAt(i);
}
callback( new Blob( [arr], {type: type || "image/png"} ) );
}
});
}
can.toBlob(function(blob) {
var request = new XMLHttpRequest();
// to receive `echo`ed file from `php` as `Blob`
// request.responseType = "blob";
request.open("POST", "readBlobInput.php", true);
request.setRequestHeader("x-file-name", "filename");
request.onload = function() {
// `this.response` : `Blob` `echo`ed from `php`
// console.log(this.response)
console.log(this.responseText);
}
request.send(blob)
});
readBlobInput.php
<?php
// the Blob will be in the input stream, so we use php://input
$input = file_get_contents("php://input");
// choose a filename, use request header
$tmpFilename = $_SERVER["HTTP_X_FILE_NAME"];
// http://stackoverflow.com/q/541430/
$folder = __DIR__ . "/tmp-png";
// http://stackoverflow.com/q/17213403/
is_dir($folder) || @mkdir($folder) || die("Can't Create folder");
// put contents of file in folder
file_put_contents($folder . "/" . $tmpFilename, $input);
// get MIME type of file
$mime = mime_content_type($folder . "/" . $tmpFilename);
$type = explode("/", $mime);
// set MIME type at file
$filename = $tmpFilename . "." . $type[1];
// rename file including MIME type
rename($folder . "/" . $tmpFilename, $folder . "/" . $filename);
// to echo file
// header("Content-Type: " . $type);
// echo file_get_contents($newName);
echo $filename . " created";
?>
关于javascript - 使用 php 从通过 ajax 发送的 dataURI 生成 png 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38236047/
如你所知&stated in w3可以使用 Blob 的 createObjectUrl 在 javascript 中为 Blob 对象创建 url。另一方面,如果我们有一个 Base64 编码字符串
有没有办法强制最新的 FireFox 打开下载对话框以使用正确的文件名保存一些本地镜像数据(dataURI、dataURL)?我想下载图片。 window.open('data:application
我想拍一张本 map 片,调整它的大小并输出dataURI。为什么我的 base64_encode 代码不起作用? '; $new_image = imagecreatetruecolor($
我允许用户根据这篇文章从文件系统加载自己的图像文件(最后一部分 - 来自本地文件系统的图像) https://stackoverflow.com/a/20285053 我的代码 handleFiles
Sass 一直给我未闭合的引号错误: ExecJS::ProgramError - /application.css.scss:10760:41102: Unclosed quote 11:47:13
我想生成由标签和图标组成的图像。标签部分会有很大差异(50-100),而图标大约有 10 个。我想通过将最终图像分成两部分(标签图像和图标图像)以模块化方式制作最终图像。我将构建一个返回标签 data
我正在使用基本的 telerik 导出文档到 pdf 功能。这非常适合将页面直接导出给用户。然后我通过 datauri 将其作为字符串传递给 Controller 。 如何将其转换回文件以便我可以
我正在编写一个 javascript 应用程序,它从基于 PHP 的 API 中获取数据作为 JSON。当前图像 URL 是从 API 接收的,然后用于使用 显示它们。标签。 使用 dataURI
我需要在 OffscreenCanvas 上进行一些绘图,然后将其显示为 div 元素的背景图像。 最简单的方法是什么? 最佳答案 对您来说最简单的方法是使用OffscreenCanvas.conve
是否可以在 XmlHttpRequest (AJAX) 调用中使用 DataURI 而不是 URL,这样它就不会真正通过网络传输,而是使用客户端中已有的数据?我打算尝试一下,但我想看看是否有人做过类似
我从 DOM 中获取一些 SVG,将其转换为 dataURI,将其作为图像绘制到 Canvas 元素,然后读取图像数据的像素。这在 chrome 和 FF 中运行良好,但 IE 10 给我一个安全错误
我遇到了一个奇怪的问题。我在页面上有一些从数据 URI 呈现的图像,我想让我的用户能够将它们复制到剪贴板。 但是,出于某种原因,Firefox 和 Chrome 似乎都不允许我这样做。 以这个页面为例
很多时候图像会内联在网站上,要么是img标签的src属性有数据url字符串而不是链接,要么css背景属性值是url(..),其中包含数据url而不是url。 如何下载该图片,尤其是背景图片。 现在
我正在通过 React webapp 将文件发送到 api 端点,目前作为模型一直在使用文件上传。此后我添加了相机功能,因为我计划让用户能够拍照并上传该照片。我正在使用 react-html5-cam
当 src 时,我无法触发 onLoad 处理程序 的属性加载了 dataURI。 Here is the jsFiddle . 这似乎是浏览器兼容性问题。 处理程序在 Firefox 中按预期触发。
好吧,我已经阅读了至少一百篇关于此的文章,但我找不到明确的例子来准确地做我想做的事情。我正在使用 RecordRTC 来获取我的视频。我可以以 blob:http://www.example.com/
我在 Raspberry Pi 上运行了 fswebcam。使用命令行,这将保存 JPG 图像。 我现在想在 Node.js 应用程序中接收这些图像,并通过 dataURI 将它们发送到浏览器中使用。
问题很简单(问) 有什么方法可以将脚本注入(inject)仅包含图像的选项卡 并具有以下形式的 URL: data:image/png;base64,iVBORw0K.... 控制台给我错误: 无法访
我在 JavaScript 中创建了一个函数,将用户选择的“图像”文件转换为 dataURI。然后我通过 POST 方法将其传递给 php 脚本。问题是当我尝试将这些信息保存到 MySQL 中时,如下
我基本上创建了一个FIDDLE并制作了一个示例图表。 这是图表的代码 var chart = c3.generate({ data: { json: [{
我是一名优秀的程序员,十分优秀!