如何在表单中的 input type="file" 中添加图像并在同一表单上提交它们后生成缩略图

Question

I have a form which allows the user to upload a picture. After the user has submitted the form, I'd like to generate on the front-end a thumbnail for each picture and then store it on server.

For security reason it's not possible to alter the value of a file input field, so how could I send to server some thumbnails images generated on the front-end in js?

Is it possible on front-end to generate a thumbnail from the image set in the input file field before form submit? And then submitting both at same time?

Answer 1

I found This simpler yet powerful tutorial . It simply creates an img element and, using the fileReader object, assigns its source attribute as the value of the form input

 function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.onloadend = function () { preview.src = reader.result; } if (file) { reader.readAsDataURL(file); } else { preview.src = ""; } }

 <input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview...">

Answer 2

After a better search online I found the answer to my question.

It is possible to combine canvas together with the File API .

Try to upload any picture in the demo below and see that a new generated thumbnail will appear on the right side of the form.

DEMO: http://jsfiddle.net/a_incarnati/fua75hpv/

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

A good answer has been given by DerekR to this question:

How to upload image into HTML5 canvas

Answer 3

Building on top of what Allesandro wrote to something more pragmatic.

The function takes a file from the File API and tries to fit it in the boundBox while preserving the aspect ratio. Nothing is drawn, but instead you get back a Promise that spits the dataUrl generated.

// Creates a thumbnail fitted insize the boundBox (w x h)
generateThumbnail(file, boundBox){
  if (!boundBox || boundBox.length != 2){
    throw "You need to give the boundBox"
  }
  var scaleRatio = Math.min(...boundBox) / Math.max(file.width, file.height)
  var reader = new FileReader();
  var canvas = document.createElement("canvas")
  var ctx = canvas.getContext('2d');

  return new Promise((resolve, reject) => {
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            var scaleRatio = Math.min(...boundBox) / Math.max(img.width, img.height)
            let w = img.width*scaleRatio
            let h = img.height*scaleRatio
            canvas.width = w;
            canvas.height = h;
            ctx.drawImage(img, 0, 0, w, h);
            return resolve(canvas.toDataURL(file.type))
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(file);
  })
}

It can be used like below

generateThumbnail(file, [300, 300]).then(function(dataUrl){
    console.log(dataUrl)
})

Answer 4

TL;DR: See the JSFiddle

As I wanted to upload images via an API and show a preview of the image (two things that actually lended themselves well to each other), I came up with this:

(function(angular) {
    angular
        .module('app')
        .directive('inputFilePreview', [function() {

            var canvas, mapToModel, elementScope;

            /**
             * To be fired when the image has been loaded
             */
            var imageOnLoad = function(){
                canvas.width = this.width;
                canvas.height = this.height;
                canvas.getContext("2d").drawImage(this,0,0);
            };

            /**
             * To be fired when the FileReader has loaded
             * @param loadEvent {{}}
             */
            var readerOnLoad = function(loadEvent){
                var img = new Image();
                img.onload = imageOnLoad;
                img.src = loadEvent.target.result;
                if(mapToModel) {
                    setModelValue(elementScope, mapToModel, img.src);
                }
            };

            /**
             * This allows us to set the value of a model in the scope of the element (or global scope if the
             * model is an object)
             * @param scope {{}}
             * @param modelReference {string}
             * @param value {*}
             */
            var setModelValue = function(scope, modelReference, value) {
                // If the model reference refers to the propery of an object (eg. "object.property")
                if(~modelReference.indexOf('.')) {
                    var parts = modelReference.split('.', 2);
                    // Only set the value if that object already exists
                    if(scope.hasOwnProperty(parts[0])) {
                        scope[parts[0]][parts[1]] = value;
                        return;
                    }
                }
                scope[modelReference] = value;
            };

            /**
             * The logic for our directive
             * @param scope {{}}
             * @param element {{}}
             * @param attributes {{}}
             */
            var link = function(scope, element, attributes) {
                elementScope = scope;
                canvas = document.getElementById(attributes.inputFilePreview);
                if(attributes.hasOwnProperty('mapToModel')) {
                    mapToModel = attributes.mapToModel;
                }
                element.on('change', function(changeEvent) {
                    var reader = new FileReader();
                    reader.onload = readerOnLoad;
                    reader.readAsDataURL(changeEvent.target.files[0]);
                });
            };

            return {
                restrict: 'A',
                link: link
            };
        }]);
})(angular);

The two elements needed for the preview to work are:

<canvas id="image-preview"></canvas>
<input type="file" data-input-file-preview="image-preview" data-map-to-model="image.file" />

Snippet Follows:

 (function (angular) { angular.module('app', []) .directive('inputFilePreview', [function () { var canvas, mapToModel, elementScope; /** * To be fired when the image has been loaded */ var imageOnLoad = function () { canvas.width = this.width; canvas.height = this.height; canvas.getContext("2d").drawImage(this, 0, 0); }; /** * To be fired when the FileReader has loaded * @param loadEvent {{}} */ var readerOnLoad = function (loadEvent) { var img = new Image(); img.onload = imageOnLoad; img.src = loadEvent.target.result; if (mapToModel) { setModelValue(elementScope, mapToModel, img.src); } }; /** * This allows us to set the value of a model in the scope of the element (or global scope if the * model is an object) * @param scope {{}} * @param modelReference {string} * @param value {*} */ var setModelValue = function (scope, modelReference, value) { // If the model reference refers to the propery of an object (eg. "object.property") if (~modelReference.indexOf('.')) { var parts = modelReference.split('.', 2); // Only set the value if that object already exists if (scope.hasOwnProperty(parts[0])) { scope[parts[0]][parts[1]] = value; return; } } scope[modelReference] = value; }; /** * The logic for our directive * @param scope {{}} * @param element {{}} * @param attributes {{}} */ var link = function (scope, element, attributes) { elementScope = scope; canvas = document.getElementById(attributes.inputFilePreview); if (attributes.hasOwnProperty('mapToModel')) { mapToModel = attributes.mapToModel; } element.on('change', function (changeEvent) { var reader = new FileReader(); reader.onload = readerOnLoad; reader.readAsDataURL(changeEvent.target.files[0]); }); }; return { restrict: 'A', link: link }; }]) .controller('UploadImageController', [ '$scope', function ($scope) { $scope.image = { title: 'Test title' }; $scope.send = function (data) { $scope.sentData = JSON.stringify(data, null, 2); return false; }; }]); })(angular);

 canvas { max-height: 300px; max-width: 300px; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <form data-ng-app="app" data-ng-controller="UploadImageController"> <input data-ng-model="image.title" /> <br /> <canvas id="image-preview"></canvas> <br /> <input type="file" data-input-file-preview="image-preview" data-map-to-model="image.file" /> <br /> <input type="submit" data-ng-click="send(image)" /> <pre>{{sentData}}</pre> </form>

Answer 5

Thought it might be worth adding a more contemporary answer and citing MDN Web Docs .

You can add an event listener for "change" on the input element and then show a thumbnail of the selected image by accessing the file list through this.files (as shown in an MDN examples). Here is a recent implementation of mine. uploadWatermark is an <input type="file></input>

 uploadWatermark.addEventListener('change', function(){ const file = this.files[0]; if (file.type.startsWith('image/')) { const img = document.createElement('img'); const watermarkPreview = document.getElementById("uploaded-watermark"); img.classList.add("prev-thumb"); img.file = file; watermarkPreview.appendChild(img); const reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }})(img); reader.readAsDataURL(file); } });

Answer 6

You can achieve it with URL.createObjectUrl() .

  const handleImage = (e) => {
    const file = e.target.files[0]
    const url = URL.createObjectURL(file)

    return url
  }

  const addBackground = (url) => {
    document.querySelector('.wrapper').style.background = `url("${url}")`;
  }

<div className='wrapper'></div>

Caution

URL.createObjectUrl() can cause memory leak, so you have to release it by URL.revokeObjectURL() after using url.