How to use blueimp-canvas-to-blob - 6 common examples

To help you get started, we’ve selected a few blueimp-canvas-to-blob examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github kartoteket / vue-image-upload-resize / src / ImageUploader.vue View on Github external
formatOutput (imageData) {
      if (this.debug) {
        console.log('ImageUploader: outputFormat: ' + this.outputFormat)
      }

      if (this.outputFormat === 'blob') {
        if (typeof dataURLtoBlob === 'undefined') {
          console.warn('Missing library! blueimp-canvas-to-blob.js must be loaded to output as "blob"')
          console.warn('Falling back to default base64 dataUrl')
          return imageData
        }
        return dataURLtoBlob(imageData)
      }

      if (this.outputFormat === 'verbose') {
        return {
          dataUrl: imageData,
          name: this.currentFile.name,
          lastModified: this.currentFile.lastModified,
          lastModifiedDate: this.currentFile.lastModifiedDate
        }
      }

      // simple base64 dataUrl string by default
      return imageData
    }
  },
github kartoteket / vue-image-upload-resize / dist / vue-image-upload-resize.esm.js View on Github external
formatOutput: function formatOutput (imageData) {
      if (this.debug) {
        console.log('ImageUploader: outputFormat: ' + this.outputFormat);
      }

      if (this.outputFormat === 'blob') {
        if (typeof dataURLtoBlob === 'undefined') {
          console.warn('Missing library! blueimp-canvas-to-blob.js must be loaded to output as "blob"');
          console.warn('Falling back to default base64 dataUrl');
          return imageData
        }
        return dataURLtoBlob(imageData)
      }

      if (this.outputFormat === 'verbose') {
        return {
          dataUrl: imageData,
          name: this.currentFile.name,
          lastModified: this.currentFile.lastModified,
          lastModifiedDate: this.currentFile.lastModifiedDate
        }
      }

      // simple base64 dataUrl string by default
      return imageData
    }
  },
github kartoteket / vue-image-upload-resize / src / components / ImageUploader.vue View on Github external
formatOutput(imageData) {
      this.log('ImageUploader: outputFormat: ' + this.outputFormat)

      if (this.outputFormat === 'file') {
        return this.currentFile
      }

      if (this.outputFormat === 'blob') {
        if (typeof dataURLtoBlob === 'undefined') {
          console.warn('Missing library! blueimp-canvas-to-blob.js must be loaded to output as "blob"')
          console.warn('Falling back to default base64 dataUrl')
          return imageData
        }
        return dataURLtoBlob(imageData)
      }

      const info = {
        name: this.currentFile.name,
        type: this.currentFile.type,
        // size: this.currentFile.size,
        newWidth: this.dimensions.width,
        newHeight: this.dimensions.height,
        orgWidth: this.dimensions.orgWidth,
        orgHeight: this.dimensions.orgHeight,
        aspectRatio: Math.round((this.dimensions.width / this.dimensions.height) * 100) / 100, //as Float
        modifiedTimestamp: this.currentFile.lastModified,
        modifiedDate: this.currentFile.lastModifiedDate,
      }

      // return just info
github axa-ch / patterns-library / src / components / 20-molecules / file-upload / utils / imageCompressor.js View on Github external
}
    // Converts PNG files over the `convertSize` to JPEGs.
    if (file.size > options.convertSize && options.mimeType === 'image/png') {
      options.mimeType = 'image/jpeg';
    }
    // If the output image is JPEG
    if (options.mimeType === 'image/jpeg') {
      // Override the default fill color (#000, black) with #fff (white)
      context.fillStyle = '#fff';
      context.fillRect(0, 0, canvasWidth, canvasHeight);
    }
    context.drawImage(image, 0, 0, canvasWidth, canvasHeight);
    if (canvas.toBlob) {
      canvas.toBlob(resolve, options.mimeType, options.quality);
    } else {
      resolve(toBlob(canvas.toDataURL(options.mimeType, options.quality)));
    }
  });
github fengyuanchen / compressorjs / src / index.js View on Github external
}

    const done = (result) => {
      if (!this.aborted) {
        this.done({
          naturalWidth,
          naturalHeight,
          result,
        });
      }
    };

    if (canvas.toBlob) {
      canvas.toBlob(done, options.mimeType, options.quality);
    } else {
      done(toBlob(canvas.toDataURL(options.mimeType, options.quality)));
    }
  }
github xkeshi / image-compressor / src / index.js View on Github external
}

        context.restore();

        const done = (result) => {
          resolve({
            naturalWidth,
            naturalHeight,
            result,
          });
        };

        if (canvas.toBlob) {
          canvas.toBlob(done, options.mimeType, options.quality);
        } else {
          done(toBlob(canvas.toDataURL(options.mimeType, options.quality)));
        }
      }))
      .then(({

blueimp-canvas-to-blob

Canvas to Blob is a polyfill for the standard JavaScript canvas.toBlob method. It can be used to create Blob objects from an HTML canvas element.

MIT
Latest version published 3 years ago

Package Health Score

53 / 100
Full package analysis

Popular blueimp-canvas-to-blob functions