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

问题描述

我试图转换从 input 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屋！