将Blob转换为图像文件 [英] Convert blob to image file

问题描述

我试图转换从输入type = file元素捕获的图像文件，但未成功.以下是我的JavaScript代码

I am trying to convert an image file captured from an input type=file element without success. Below is my javascript code

        var img = document.getElementById('myimage');
        var file = document.querySelector('input[type=file]').files[0];
        var reader = new FileReader();
        reader.addEventListener("load", function () {
            var theBlob = reader.result;
            theBlob.lastModifiedDate = new Date();
            theBlob.name = file;
            img.src = theBlob;
            var newfile = new File([theBlob], "c:files/myfile.jpg");

        }, false);

        if (file) {
            reader.readAsDataURL(file);
        }

该图像在img元素中正确显示，但是File命令不会创建myfile.jpg图像文件.我试图捕获图像，然后使用javascript调整大小，然后再将其上传到服务器.有人知道为什么不创建图像文件吗?更好的是，没有人有代码说明如何在客户端上调整图像文件的大小，然后将其上传到服务器吗?

The image is displayed properly in the img element but the File command does not create the myfile.jpg image file. I am trying to capture the image and then resizing it using javascript before I upload it to the server. Anyone know why the image file is not being created? Better yet, anyone have code on how to resize an image file on the client and then upload it to a server?

推荐答案

这是使用Canvas从"myimage"元素中获取大小调整后的jpeg文件的方法.

This is how you can get a resized jpeg file from your "myimage" element using Canvas.

我注释了每一行代码，以便您了解我在做什么.

I commented every line of code so you could understand what I was doing.

// Set the Width and Height you want your resized image to be
var width = 1920; 
var height = 1080; 


var canvas = document.createElement('canvas');  // Dynamically Create a Canvas Element
canvas.width  = width;  // Set the width of the Canvas
canvas.height = height;  // Set the height of the Canvas
var ctx = canvas.getContext("2d");  // Get the "context" of the canvas 
var img = document.getElementById("myimage");  // The id of your image container
ctx.drawImage(img,0,0,width,height);  // Draw your image to the canvas


var jpegFile = canvas.toDataURL("image/jpeg"); // This will save your image as a 
                                               //jpeg file in the base64 format.

javascript变量"jpegFile"现在包含以URL://Base64格式编码的图像.看起来像这样:

The javascript variable "jpegFile" now contains your image encoded into a URL://Base64 format. Which looks something like this:

// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"

您可以将该变量作为HTML代码中的图像源，它将在浏览器中显示图像，或者您可以将Base64编码的字符串上载到服务器.

You can put that variable as an image source in HTML code and it will display your image in the browser, or you can upload the Base64 encoded string to the server.

// This function is used to convert base64 encoding to mime type (blob)
function base64ToBlob(base64, mime) 
{
    mime = mime || '';
    var sliceSize = 1024;
    var byteChars = window.atob(base64);
    var byteArrays = [];

    for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
        var slice = byteChars.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    return new Blob(byteArrays, {type: mime});
}

现在清理base64，然后将其传递到上面的函数中:

Now clean the base64 up and then pass it into the function above:

var jpegFile64 = jpegFile.replace(/^data:image\/(png|jpeg);base64,/, "");
var jpegBlob = base64ToBlob(jpegFile64, 'image/jpeg');  

现在使用ajax发送"jpegBlob"

Now send the "jpegBlob" with ajax

var oReq = new XMLHttpRequest();
oReq.open("POST", url, true);
oReq.onload = function (oEvent) {
  // Uploaded.
};

oReq.send(jpegBlob);

这篇关于将Blob转换为图像文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！