我正在使用(ngImgCrop)裁剪图像,然后使用(angular-file-upload)将裁剪后的图像上传到服务器.
我可以从ngImgCrop中的"on-change"选项中获取$ dataURI.但我需要一个File instace来调用$ upload.如何获取裁剪图像的File实例以便上传:
$scope.upload = $upload.upload({
url: '/api/fileupload',
file: [**file cropped here**]
}).progress(function (evt) {
//
}).success(function (data, status, headers, config) {
//
});
我正在从画布创建一个 PNG 文件，但在我想将画布显示为 img 元素之前，使用 blob 作为 img 的 src。到目前为止我尝试过的：
canvas = document.getElementById("canvas");
//Get data from canvas
img_b64 = canvas.toDataURL('image/png');
//Create PNG
png = img_b64.split(',')[1];
//Create new img
img = document.createElement("img");
img.src = img_b64;
//Append img to document
//Save png
这是可行的，但img_b64我想要一个 blob 作为 img 的 src，如下所示：
//Create blob from new PNG
blob = new Blob([window.atob(png)], { type: 'image/png', encoding: 'utf-8' });
//Create new img with blob as src
img = document.createElement("img");
img.src = URL.createObjectURL(blob);
//Append img to document …是否可以将渲染的画布保存回Google Chrome中的文件？
我试过这个:
canvas.getAsFile('foo.jpg','image/jpeg')
不行.
这仅适用于Firefox:
canvas.mozGetAsFile('foo.jpg')
当然,我可以并且可能只是将原始base64编码的字符串发送到服务器并在那里解码.
但如果可以在客户端进行,我宁愿在那里做.
我有一个图像的base64字符串.如何将其转换为对象URL？目的是通过向DOM注入Blob URL而不是非常大的base64字符串来尝试查看我的svg编辑器是否会更快.这仅用于编辑SVG.在保存时,对象URL将再次重新转换为base64.
图像大小通常为0.5 MB或更大.
我尝试过的:
var img = ...; //svg <image>
var bb = new BlobBuilder();
var dataStr = img.getAttributeNS(XLINKNS, 'href'); //data:image/jpeg;base64,xxxxxx
//dataStr = dataStr.replace(/data:.+;base64,/i, ''); //Strip data: prefix - tried both with & without
//dataStr = window.atob(dataStr); //tried both with & without
bb.append(dataStr);
var blob = bb.getBlob
img.setAttributeNS(XLINKNS, 'xlink:href', window.URL.createObjectURL(blob)); //blob:xxx
我得到的是一个看似腐败的jpeg图像.
TIA.
我想上传画布图片formdata/multipart.我有一个使用toDataURL()生成图像数据的画布.我想像formdata/multipartAjax帖子一样上传图像数据.
这是代码....
var dataUrl = canvas.toDataURL('image/png');
var multipart = new FormData();
multipart.append('user_id', userID);
multipart.append('password', pwd);
multipart.append('inputdata',image data here);
$.ajax({
type : 'POST',
// dataType: 'json',
url : serviceURL,
data : multipart,
cache : false,
processData : false,
contentType : false,
success : function(data) {
},
error : function(xhr, status, error) {
}
});
我知道无法将图像数据uri附加到FormData中.那我该如何追加呢？
谢谢
以下代码适用于Google Chrome,但不适用于IE11.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
<img id="img1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAASUlEQVRo3u3PAQ0AIAwDsIGC+TcL
LkhOWgddSU6Ga5udT4iIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIi8cQEjUgGT
mE6z3QAAAABJRU5ErkJggg==" />
<script>
var a = document.createElement('a');
var image = document.getElementById('img1');
a.setAttribute('href', image.src);
a.setAttribute("download", 'fileName');
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
</script>
</body>
</html>
当我在IE11中运行此代码时,我收到消息:"您是否要允许此网站在您的计算机上打开应用程序？"
单击"允许"后,我"没有安装任何应用程序来打开此类链接(数据)"
如何使它在IE11中工作？
我正在HTML5中制作透视校正图像滤镜.该算法准备就绪,工作正常.
但是我在导出图像时遇到了问题.
我使用带有Three.js的WebGL上下文进行透视校正,因此我可以在GPU上快速完成任务(它实际上非常快速,在不到半秒的时间内完成3680x2760图像渲染).
所以我有两件事:用户用来配置和预览的低分辨率视口(720x480),以及高分辨率的背景视口(图像的大小,只是临时创建以渲染图像并且它们被破坏,所有这些都在里面完成一个RenderHighRes函数).
但是我的谷歌浏览器在打开图像时崩溃,可能是因为尺寸和源格式.为了导出图像我正在使用此代码:
console.log("Rendering");
vcomposer.render();
console.log("Rendered! Exporting");
var URL = vcomposer.renderer.domElement.toDataURL("image/jpeg");
console.log("Exported! Opening");
window.open(URL);
无论图像大小如何,我都可以"导出!打开".但是对于更大的图像(如3680x2760),浏览器在打开URL时会崩溃.我认为它是因为它获得了像这样的图像的大网址.
所以问题是,我不需要打开图像,只需让用户下载即可.如果不将dataURL发送给用户下载,我怎么能这样做呢？
PS:如果我删除window.open行,它不会崩溃任何东西,所以渲染工作正常.同样具有所提及图像的半分辨率,它工作正常,因此它只是一个尺寸问题.
我希望我明白了^^
谢谢!
卢卡斯
我正在尝试使用facebook api从我保存在页面上的画布上传图像:
var file = dataURItoBlob(canvas.toDataURL('image/jpeg', 1.0))
FB.api('/me/photos', 'POST', {
source: file,
message: 'photo description'
}, function (response) {
console.log(response)
}
)
这是blob转换器:
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: 'image/jpeg' });
}
我收到一个错误:message: "(#324) Requires upload file"所以看起来上传者不会将blob识别为有效文件.
更新1:
我想这篇文章:将数据URI转换为文件,然后附加到FormData关于将blob转换为formData,尝试如下:
var dataURL = canvas.toDataURL('image/jpeg', 1.0)
var blob …我们正在尝试通过在网站上生成新图片来更改用户的个人资料图片。我们尝试通过从 HTML 代码创建画布来实现此目的，然后使用toDataURL函数通过发布包含此数据的表单（输入类型=\'file\'）将图片数据发送到服务器。
\n\n当我们从计算机中选择文件时它可以工作，但当尝试将图像数据（从画布）附加到表单时我们无法使其工作。
\n\n我已经找到了多种不完整的替代方案来解决如何做到这一点，但没有什么可以真正使其发挥作用。我们可能无法像我们那样设置输入值=imageData，但我们尝试了很多其他方法也不起作用，所以我们就这样保留它。
\n\n提供的代码可能会有帮助，但也可能有一个通用的解决方案。
\n\n最后，我们还是初学者，已经在网上搜索了整整两天的解决方案。我们找到了一些替代解决方案，但也无法使其完全发挥作用。非常感谢！
\n\n我们发现一些几乎有用的链接：
\n\n\n\n\n\n\n\n这是Python文件（my_app.py）
\n\nfrom flask import Flask, url_for, render_template, request, redirect\napp=Flask(__name__)\nfrom flask_uploads import UploadSet, configure_uploads, IMAGES\nphotos = UploadSet(\'photos\', IMAGES)\napp.config[\'UPLOADED_PHOTOS_DEST\'] = \'static/uploads\'\nconfigure_uploads(app, photos)\n\n@app.route(\'/abc_test/\', methods=["GET", "POST"])\ndef abc_test():\n if request.method==\'POST\':\n print("It is a POST request")\n try:\n print(request.form[\'PHOTO\'])\n except Exception as e:\n print((\'exception 1:\', e))\n try:\n print(request.files[\'PHOTO\'])\n except Exception as e:\n print((\'exception 2:\', e))\n …我正在使用Expo及其ImagePicker从图库中抓取图像。它同时返回uri和base64。
现在我想在multipart/form-data请求中上传图像。
问题是服务器只File在下面的代码发送时才接受[object Object]。
const formData = new FormData();
const data = {
jwt,
};
formData.append('message', JSON.stringify(data));
formData.append('avatar', {
uri: avatar,
type: 'image/png',
name: 'avatar.png'
});
fetch(url, {
method: 'POST',
body: formData,
headers: {
Accept: 'application/json',
},
})
由于我使用的是 Expo，因此我仅限于它支持的库。此外，添加Content-Type标头根本不起作用，服务器甚至无法识别该消息。