Конвертировать BLOB в файл изображения - PullRequest
Новая
       6

Конвертировать BLOB в файл изображения

0 голосов
/ 26 мая 2018

Я пытаюсь преобразовать файл изображения, захваченный из элемента ввода 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, прежде чем загрузить его на сервер.Кто-нибудь знает, почему файл изображения не создается?А еще лучше, у кого-нибудь есть код, как изменить размер файла изображения на клиенте и затем загрузить его на сервер?

Ответы [ 2 ]

0 голосов
/ 26 мая 2018

Вот как вы можете получить файл jpeg с измененным размером из вашего элемента "myimage", используя Canvas.

Я прокомментировал каждую строку кода, чтобы вы могли понять, что я делал. 

// 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.id = "extractFileCanvas";  // Give the canvas an id
canvas.width  = width;  // Set the width of the Canvas
canvas.height = height;  // Set the height of the Canvas
canvas.style.display   = "none";  // Make sure your Canvas is hidden
document.body.appendChild(canvas);  // Insert the canvas into your page


var c=document.getElementById("extractFileCanvas");  // Get canvas from page
var ctx=c.getContext("2d");  // Get the "CTX" 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 = c.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"

Вы можете либо поместить эту переменную в качестве источника изображения, и она будет отображать ваше изображение, либо вы можете загрузить закодированную строку Base64 на сервер.

Редактировать: Как преобразовать файл в большой двоичный объект и загрузить его на сервер 

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

Теперь отправьте «jpegBlob» с помощью ajax 

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

oReq.send(jpegBlob);
0 голосов
/ 26 мая 2018

Вы не можете манипулировать жестким диском прямо из браузера.Однако вы можете создать ссылку, которую можно загрузить.

Для этого измените 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();
...