我有一个jpeg作为base64编码的字符串.
var image = "/9j/4AAQSkZJRgABAQEAS..."
我想使用FormData将此jpeg上传到服务器.
var data = new FormData();
将图像附加到数据的正确方法是什么？
我正在使用HTML5文件API将文件上传到我的Web应用程序.
我的网页上有一个输入元素,我用它来读取文件和调用上传功能
<input type="file">
$('input[type="file"]').on("change",function(e){
console.log(this.files);
// upload each file in this.files
});
这适用于os上的本机文件.我想现在上传远程文件,例如example.com/blah/file1.jpg我的问题是如何使用File API读取此文件？有办法吗？
我必须为将来的项目(无闪光灯,IE10 +,FF7 +等)创建一个图像上传器,它在客户端而不是服务器上进行图像大小调整/转换/裁剪.
所以我创建了一个javascript界面,用户可以在其中"上传"他们的文件并直接在浏览器中调整大小/裁剪,而无需联系服务器.性能还可以,不是那么好,但它确实有效.
endresult是一个canvas元素数组.用户可以在调整大小后编辑/裁剪图像,因此我将它们保留为画布而不是将它们转换为jpeg.(这将使初始表现恶化)
现在这很好用,但我不知道现在将完成的canvas元素实际上传到服务器的最佳方法是什么.(在服务器上使用asp.net 4通用处理程序)
我尝试从包含每个画布的dataurl的所有元素创建一个json对象.
问题是,当我得到10-40张图片时,浏览器会在创建dataurls时开始冻结,特别是对于大于2兆字节的图像.
//images = array of UploadImage
for (var i = 0; i < images.length; i++) {
var data = document.getElementById('cv_' + i).toDataURL('image/jpg');
images[i].data = data.substr(data.indexOf('base64') + 7);
}
将它们转换为json对象(我使用的是json2.js)通常会导致我的浏览器崩溃.(FF7)
我的目标
var UploadImage = function (pFileName, pName, pDescription) {
this.FileName = pFileName;
this.Name = pName;
this.Description = pDescription;
this.data = null;
}
上传例程
//images = array of UploadImage
for (var i = 0; i < images.length; i++) {
var data = document.getElementById('cv_' + …嗨,我想在IE中本地保存画布.
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
我无法通过以下方式下载它.
1) document.execCommand("SaveAs"..
2) window.location.href = img;
3) $.fileDownload(img); // jquery download file library-
4) canvas2image // cross domain problem.
有没有办法在没有base64或跨域问题的IE中本地保存画布？非常感谢你.
我有一个允许我传递文件内容,名称和类型的功能,该功能将自动保存.它适用于基于文本的文档,但现在我正在尝试保存其他文件,如图像文件.沿着这条线的某个地方,它被破坏了,无法正常工作.
function write(text, filename, mime){
var file = new Blob([text], {type:mime}), a = document.createElement('a');
// Download in IE
if(window.navigator.msSaveBlob) window.navigator.msSaveBlob(file, filename);
// Download in compliant browsers
else{
var url = URL.createObjectURL(file);
a.href = url, a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function(){
document.body.removeChild(a);
window.URL.revokeObjectURL(url);}, 0);}}
write('Plain text', 'demo.txt', 'text/plain');
write(atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAAdCAIAAADkY5E+AAAAD0lEQVR42mNg0AthoDMGAE1BDruZMRqXAAAAAElFTkSuQmCC'), 'demo.png', 'image/png');
我是 python 的新手，我使用 python 做了一个应用程序，因为我想使用 html 和 AJAX javascript 从我的网络摄像头捕获图像并将其保存到服务器端 python。我已经使用客户端 HTML 完成了图像的捕获，但我不知道如何将数据从 html 客户端保存和传递到服务器端 python。如果有人这样做，请你帮我...提前谢谢。 ..我的.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get User Media - Photo</title>
</head>
<body>
<button id="take">Take a photo</button><br />
<video id="v"></video>
<canvas id="canvas" style="display:none;"></canvas>
<img src="D:/VoteTest/img.jpg" id="photo" alt="photo">
<script>
;(function(){
function userMedia(){
return navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia || null;
}
// Now we can use it
if( userMedia() ){
var videoPlaying = false;
var constraints = {
video: …我正在使用fabric.jsof 内部backbone.js，并试图弄清楚如何使用fabric's 命令加载 Base64 图像：
fabric.Image.fromURL( 'url', function(img)....
当我插入静态 url 时它工作正常，例如：
fabric.Image.fromURL('http://www.domain.com/image.jpg', function(img) {
img.set({ left: ui.offset.left, top: ui.offset.top});
canvas.add(img);
});
但我无法成功加载 Base64 图像。我该如何解决这个问题？
我正在尝试使用Dropzone.js上传生成的客户端文档(目前的图像).
// .../init.js
var myDropzone = new Dropzone("form.dropzone", {
autoProcessQueue: true
});
一旦客户完成了他的工作,他只需要点击一个调用保存功能的保存按钮:
// .../save.js
function save(myDocument) {
var file = {
name: 'Test',
src: myDocument,
};
console.log(myDocument);
myDropzone.addFile(file);
}
console.log()正确地返回了我的文档内容
data:image/png;base64,iVBORw0KGgoAAAANS...
此时,我们可以看到进度条在放置区中上传文档但上传失败.
这是我的(标准dropzone)HTML表单:
<form action="/upload" enctype="multipart/form-data" method="post" class="dropzone">
<div class="dz-default dz-message"><span>Drop files here to upload</span></div>
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
我有一个收到邮件请求的Symfony2控制器.
// Get request
$request = $this->get('request');
// Get files
$files = $request->files;
// Upload
$do = $service->upload($files);
从dropzone上传(通过拖放或点击)正在运行并且上传成功但是使用myDropzone.addFile()函数在我的控制器中返回一个空对象:
var_dump($files);
返回
object(Symfony\Component\HttpFoundation\FileBag)#11 (1) { …真的不想在这里重复。
我在用
http://fengyuanchen.github.io/cropper/0.7.9/
我参考了这些帖子：
画布和图像新手，很抱歉问这个问题是否微不足道。
我的环境是JS、MVC
我的目标
我正在尝试将裁剪图像的结果以 base64 字符串保存到数据库中。
我已将其发布并保存，但图像与原始图像相同。
我需要将其转换为 Blob 吗？真的不知道那是做什么的。
我是否需要先创建画布，然后获取数据...不知道该怎么做？
我的代码如下
// cropper
function loadCropper() {
//var console = window.console || { log: function () { } };
var $body = $('body');
var $image = $('.img-container > img');
var $actions = $('.docs-actions');
var $dataX = $('#dataX');
var $dataY = $('#dataY');
var $dataHeight = $('#dataHeight');
var $dataWidth = $('#dataWidth');
var $dataRotate = $('#dataRotate');
var $dataScaleX = $('#dataScaleX');
var $dataScaleY = $('#dataScaleY');
var …我试图将FileSaver.js与Fabric.canvas对象一起使用,但似乎Fabric js没有blob选项.
顺便说一句,我正在使用Meteor框架.
如何在不使用基本canvas.toDataUrl的情况下导出Fabric画布？
谢谢 :)
javascript ×8
canvas ×3
html5 ×3
fabricjs ×2
jquery ×2
ajax ×1
backbone.js ×1
base64 ×1
download ×1
dropzone.js ×1
file-upload ×1
filereader ×1
filesaver.js ×1
form-data ×1
html ×1
html5-canvas ×1
image ×1
json ×1
meteor ×1
python ×1
symfony ×1