从外部图像url创建Blob
Creating a Blob from an external image url
我有一个文件输入,我用来获取一个文件,并把它变成一个blob。是否有办法获取外部图像url并将其转换为blob?以下是我使用的代码,仅使用来自<input type="file" />
的文件:
//Process the file and resize it.
function processfile(file) {
if (!(/image/i).test(file.type)) {
alert("File " + file.name + " is not an image.");
return false;
}
// read the files
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function (event) {
// blob stuff
var blob = new Blob([event.target.result]); // create blob...
window.URL = window.URL || window.webkitURL;
var blobURL = window.URL.createObjectURL(blob); // and get it's URL
// helper Image object
var image = new Image();
image.src = blobURL;
image.onload = function () {
for (var x = 0; x < self.ThumbSizes.length; x++) {
// have to wait till it's loaded
var resized = resizeMe(image, self.ThumbSizes[x]); // send it to canvas
var resized_blob = dataURItoBlob(resized);
uploadFile(resized_blob, self.ThumbSizes[x].Name);
}
}
};
不是通过传递文件,我希望能够构建这段代码来传递图像url并将其转换为blob。
希望对你有所帮助。(我没有运行)
function processfile(imageURL) {
var image = new Image();
var onload = function () {
var canvas = document.createElement("canvas");
canvas.width =this.width;
canvas.height =this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
canvas.toBlob(function(blob) {
// do stuff with blob
});
};
image.onload = onload;
image.src = imageURL;
}
相关文章:
- AudioContext从blob获取数据的视频创建MediaElementSource
- 有没有一种方法可以为urlCreator.createObjectURL(blob)创建文件名
- 使用Javascript创建Azure Blob
- 在消耗大量内存后,浏览器在创建图像Blob的ObjectURL时抛出错误
- 使用应用程序脚本在内存中创建新blob
- 将 pdf 加载到 Blob 并创建网址
- 如何从 atob 创建二进制 blob - 当前获取不同的字节
- 如何使用javascript中的Blob创建文件并将其保存在本地系统中
- 如何创建视频文件的blob
- 使用blob创建json文件
- 在JS中创建二进制blob
- Javascript如何创建和使用带有纯二进制数据的blob
- 使用HTML元素中的数据创建Javascript Blob().然后将其作为文本文件下载
- 使用$http从服务器下载的原始文件创建Blob对象
- 从blob切片创建blob
- 创建/追加包含包含引号的blob文本的元素
- 使用javascript类型BLOB的WebWorker创建一个带有动态路径的WebSocket
- 如何清除在HTML5 FileReader调用时创建的BLOB
- 从外部图像url创建Blob
- 从图像URI创建Javascript文件/Blob对象