將 blob 轉換為圖像文件

Question

我試圖轉換從輸入 type=file 元素捕獲的圖像文件，但沒有成功。 下面是我的javascript代碼

        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 調整其大小。 有誰知道為什么沒有創建圖像文件？ 更好的是，任何人都有關於如何在客戶端上調整圖像文件大小然后將其上傳到服務器的代碼？

Answer 1

這是使用 Canvas 從“myimage”元素獲取調整大小的 jpeg 文件的方法。

我注釋了每一行代碼，這樣你就可以理解我在做什么。

// 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 格式的圖像。 看起來像這樣：

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

您可以將該變量作為 HTML 代碼中的圖像源，它會在瀏覽器中顯示您的圖像，或者您可以將 Base64 編碼的字符串上傳到服務器。

編輯：如何將文件轉換為 blob（二進制文件）並將其上傳到服務器

// 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，然后將其傳遞給上面的函數：

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

現在用ajax發送“jpegBlob”

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

oReq.send(jpegBlob);

Answer 2

您不能直接從瀏覽器操作硬盤。 您可以做的是創建一個可以下載的鏈接。

為此，請更改var newfile = new File([theBlob], "c:files/myfile.jpg"); 進入：

const a = document.createElement('a');
a.setAttribute('download', "some image name");
a.setAttribute('href', theBlob);

a.click();