Javascript 从外部图像url创建Blob

我有一个文件输入，我用它来获取一个文件并将其转换为blob。我是否可以获取一个外部图像url并将其转换为blob？下面是我用来处理

文件的代码：

//处理文件并调整其大小。
函数processfile（文件）{
if（！（/image/i.test（file.type））{
警报（“文件“+File.name+”不是图像。”）；
返回false；
}
//读文件
var reader=new FileReader（）；
reader.readAsArrayBuffer（文件）；
reader.onload=函数（事件）{
//斑点状的东西
var blob=new blob（[event.target.result]）；//创建blob。。。
window.URL=window.URL | | window.webkitURL；
var blobURL=window.URL.createObjectURL（blob）；//并获取它的URL
//辅助图像对象
var image=新图像（）；
image.src=blobURL；
image.onload=函数（）{
对于（var x=0；x

我不想传递文件，而是希望能够构造此代码以传递图像url并将其转换为blob。

我希望它能帮助您。（我没有运行它。）

---

这是您正在寻找的解决方案类型吗？canvas.toBlob在chrome等主要浏览器上不受支持，但您可以将此polyfill与您将获得的解决方案一起使用

未捕获的安全性错误：未能在“HtmlCanvaElement”上执行“toBlob”：可能无法导出受污染的画布。

如果服务器在不允许的情况下向您发送图像标题。

//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);
                    }
                }
            };

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;
}