我正在开发一个chrome扩展.
我在画布中打开一个图像文件,我对它应用了一些更改,然后我试图将它保存到HTML5文件系统API.
首先,我从画布中获取dataURL:
var dataURL = canvas.toDataURL('image/png;base64');
然后只是数据:
var image64 = dataURL.replace(/data:image\/png;base64,/, '');
然后我做一个Blob.
var bb = new BlobBuilder();
bb.append(image64);
var blob = bb.getBlob('image/png');
然后我使用以下函数onInitFs()请求文件系统;
function onInitFs(fs) {
fs.root.getFile('image.png', {create: true}, function(fileEntry) {
// Create a FileWriter object for our FileEntry (log.txt).
fileEntry.createWriter(function(fileWriter) {
//WRITING THE BLOB TO FILE
fileWriter.write(blob);
}, errorHandler);
}, errorHandler);
}
window.requestFileSystem(window.PERSISTENT, 5*1024*1024, onInitFs, errorHandler);
这会导致将损坏的文件写入文件系统.
我不知道我还能做些什么来完成这项工作.
有人可以指导我朝正确的方向发展.
以下是我用来完成此任务的函数的一些来源.
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method
http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-file-creatingempty
谢谢!
我想在客户端使用 JavaScript 调整图像大小。我找到了两种解决方案，一种是使用.toDataURL()函数，另一种是使用.toBlob()函数。两种解决方案都有效。好吧，我只是好奇这两个功能之间有什么区别？哪一个更好？或者我应该什么时候使用.toDataURL()函数或.toBlob()函数？
这是我用来输出这两个函数的代码，图像大小（字节）和图像颜色（我不确定这个）略有不同。代码有问题吗？
<html>
<head>
<title>Php code compress the image</title>
</head>
<body>
<input id="file" type="file" onchange="fileInfo();"><br>
<div>
<h3>Original Image</h3>
<img id="source_image"/>
<button onclick="resizeImage()">Resize Image</button>
<button onclick="compressImage()">Compress Image</button>
<h1 id="source_image_size"></h1>
</div>
<div>
<h3>Resized Image</h3>
<h1> image from dataURL function </h1>
<img id="result_resize_image_dataURL"/>
<h1> image from toBlob function </h1>
<img id="result_resize_image_toBlob"/>
</div>
<div>
<fieldset>
<legend>Console output</legend>
<div id='console_out'></div>
</fieldset>
</div>
<script>
//Console logging (html)
if (!window.console)
console = {};
var console_out = document.getElementById('console_out'); …这应该很简单,但经过几个小时的摔跤,我仍然无法让它发挥作用.根据firefox的说法,到目前为止,我所有的尝试都导致图像变得"被破坏或被截断".
使用jquery-ajax调用从服务器检索图像:
$.ajax({
async: false,
url: db[key]["DocumentLink"],
success: function (result2) {
Base64对图像进行编码,并将其存储在localStore中:
在这个例子中,我使用的是jquery base64-encoding插件,但我尝试了几个.
var dbKey = "Doc " + db[key]["ID"] + " " + db[key]["Title"];
console.log("storing: " + db[key]["DocumentLink"] + " in " + dbKey + "\n");
localStorage.removeItem(dbKey);
var base64Image = $.base64Encode(result2);
console.log(base64Image.length);
localStorage.setItem(dbKey, base64Image);
console.log("is stored: " + db[key]["DocumentLink"] + " in " + dbKey + "\n");
}
})
使用数据网址显示图片:
function openImageFromDB(dbKey) {
console.log("Trying to display image with key " + dbKey);
var base64Img = localStorage.getItem(dbKey);
document.getElementById("documentHolder").src='data:image/jpeg;base64,' + …使用html2canvas如何将屏幕截图保存到对象？我一直在探索演示,并看到生成屏幕截图的函数生成如下:
$(window).ready(function() {
('body').html2canvas();
});
我尝试过的是
$(window).ready(function() {
canvasRecord = $('body').html2canvas();
dataURL = canvasRecord.toDataURL("image/png");
dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
upload(dataURL);
});
然后,我将其传递给我的upload()函数.我遇到的问题是,我无法弄清楚在html2canvas()库中制作屏幕截图的位置或者什么函数返回它.我试着转换使用Canvas对象这从SO答案(虽然我不能肯定我需要做到这一点).
我只问了一个问题,关于如何上传文件到imgur,有答案(尤其是@ bebraw的)帮助我明白我需要做的.
该upload()函数来自Imgur示例api帮助:
function upload(file) {
// file is from a <input> tag or from Drag'n Drop
// Is the file an image?
if (!file || !file.type.match(/image.*/)) return;
// It is!
// Let's build a FormData object
var fd = new FormData();
fd.append("image", file); // …我想在UI上显示jpeg图像.为此,我请求我的服务(GET方法),然后我转换为base 64:
$http({
url: "...",
method: "GET",
headers: {'Content-Type': 'image/jpeg'}
}).then(function(dataImage){
var binary = '';
var responseText = dataImage.data;
var responseTextLen = dataImage.data.length;
for (var j = 0; j < responseTextLen; j+=1) {
binary += String.fromCharCode(responseText.charCodeAt(j) & 0xff)
}
base64Image = 'data:image/jpeg;base64,' + window.btoa(binary);
});
最后,我的浏览器告诉我图像已损坏或被截断.所以我尝试使用overrideMimeType('text/plain; charset = x-user-defined')创建XMLHttpRequest,它可以工作:
var xhr_object = new XMLHttpRequest();
xhr_object.overrideMimeType('text/plain; charset=x-user-defined');
xhr_object.open('GET', '...', false);
xhr_object.send(null);
if(xhr_object.status == 200){
var responseText = xhr_object.responseText;
var responseTextLen = responseText.length;
var binary = ''
for (var j = 0; …我有一个图像需要转换为 Uint8Array。
例如：
var image = new Image();
image.src="image13.jpg";
现在我需要将此图像变量转换为 Uint8Array。JS中有没有什么函数可以实现这个功能？
我需要能够将图像和一些表单字段从客户端canvas元素发送到PHP脚本,最后是$ _POST和$ _FILES.当我这样发送时:
<script type="text/javascript">
var img = canvas.toDataURL("image/png");
...
ajax.setRequestHeader('Content-Type', "multipart/form-data; boundary=" + boundary_str);
var request_body = boundary + '\n'
+ 'Content-Disposition: form-data; name="formfield"' + '\n'
+ '\n'
+ formfield + '\n'
+ '\n'
+ boundary + '\n'
+ 'Content-Disposition: form-data; name="async-upload"; filename="'
+ "ajax_test64_2.png" + '"' + '\n'
+ 'Content-Type: image/png' + '\n'
+ '\n'
+ img
+ '\n'
+ boundary;
ajax.send(request_body);
</script>
$ _POST和$ _FILES都回填了,但$ _FILES中的图像数据仍然需要解码如下:
$loc = $_FILES['async-upload']['tmp_name'];
$file = fopen($loc, 'rb');
$contents = fread($file, filesize($loc)); …我们使用Eclipse SWT WebBrowser控件为我们的Java应用程序呈现HTML页面.如果页面包含图像,我们希望获取图像内容.我们可以访问DOM来获取IMG元素,但除了使用图像URL重新获取图像之外,似乎没有办法获取实际内容(即图像的字节).(我们可以通过'src'属性获取图像URL.)有没有办法从DOM中获取图像的实际字节？
我正在尝试使用Javascript上传png到imgur.我直接使用了Imgur API 示例中的代码,但我不认为我正在传递png文件,因为我收到一条错误消息file.type is undefined.我认为该文件没问题,因为我尝试了几个不同的png.我的代码如下:
<html>
<head>
<script type="text/javascript">
function upload(file) {
// file is from a <input> tag or from Drag'n Drop
// Is the file an image?
if (!file || !file.type.match(/image.*/)) return;
// It is!
// Let's build a FormData object
var fd = new FormData();
fd.append("image", file); // Append the file
fd.append("key", "mykey"); // Get your own key: http://api.imgur.com/
// Create the XHR (Cross-Domain XHR FTW!!!)
var xhr …我正在开发一个phonegap应用程序并使用该navigator.getPicture方法来获取图像.
我得到这张照片的方式是:
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
就像phonegap doc中的例子一样.
我希望能够使用imageURI,然后将其转换为图像数据,以便以后上传.(我不想使用phonegap的FileTransfer)
到目前为止,我已尝试用JavaScript获取图像数据？并且你怎么能编码在JavaScript字符串为Base64？
当我尝试以下,
function onSuccess(imageURI) {
getBase64Image(imageURI);
}
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG …javascript ×8
image ×4
ajax ×3
base64 ×3
canvas ×3
android ×1
angularjs ×1
arrays ×1
blob ×1
browser ×1
cordova ×1
dom ×1
filesystems ×1
filewriter ×1
get ×1
html2canvas ×1
html5 ×1
html5-canvas ×1
http ×1
imgur ×1
mime-types ×1
php ×1
png ×1
screenshot ×1
swt ×1
upload ×1