canvas-to-blob.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. /*
  2. * JavaScript Canvas to Blob
  3. * https://github.com/blueimp/JavaScript-Canvas-to-Blob
  4. *
  5. * Copyright 2012, Sebastian Tschan
  6. * https://blueimp.net
  7. *
  8. * Licensed under the MIT license:
  9. * http://www.opensource.org/licenses/MIT
  10. *
  11. * Based on stackoverflow user Stoive's code snippet:
  12. * http://stackoverflow.com/q/4998908
  13. */
  14. /*global window, atob, Blob, ArrayBuffer, Uint8Array, define, module */
  15. ;(function (window) {
  16. 'use strict'
  17. var CanvasPrototype = window.HTMLCanvasElement &&
  18. window.HTMLCanvasElement.prototype
  19. var hasBlobConstructor = window.Blob && (function () {
  20. try {
  21. return Boolean(new Blob())
  22. } catch (e) {
  23. return false
  24. }
  25. }())
  26. var hasArrayBufferViewSupport = hasBlobConstructor && window.Uint8Array &&
  27. (function () {
  28. try {
  29. return new Blob([new Uint8Array(100)]).size === 100
  30. } catch (e) {
  31. return false
  32. }
  33. }())
  34. var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
  35. window.MozBlobBuilder || window.MSBlobBuilder
  36. var dataURIPattern = /^data:((.*?)(;charset=.*?)?)(;base64)?,/
  37. var dataURLtoBlob = (hasBlobConstructor || BlobBuilder) && window.atob &&
  38. window.ArrayBuffer && window.Uint8Array &&
  39. function (dataURI) {
  40. var matches,
  41. mediaType,
  42. isBase64,
  43. dataString,
  44. byteString,
  45. arrayBuffer,
  46. intArray,
  47. i,
  48. bb
  49. // Parse the dataURI components as per RFC 2397
  50. matches = dataURI.match(dataURIPattern)
  51. if (!matches) {
  52. throw new Error('invalid data URI')
  53. }
  54. // Default to text/plain;charset=US-ASCII
  55. mediaType = matches[2]
  56. ? matches[1]
  57. : 'text/plain' + (matches[3] || ';charset=US-ASCII')
  58. isBase64 = !!matches[4]
  59. dataString = dataURI.slice(matches[0].length)
  60. if (isBase64) {
  61. // Convert base64 to raw binary data held in a string:
  62. byteString = atob(dataString)
  63. } else {
  64. // Convert base64/URLEncoded data component to raw binary:
  65. byteString = decodeURIComponent(dataString)
  66. }
  67. // Write the bytes of the string to an ArrayBuffer:
  68. arrayBuffer = new ArrayBuffer(byteString.length)
  69. intArray = new Uint8Array(arrayBuffer)
  70. for (i = 0; i < byteString.length; i += 1) {
  71. intArray[i] = byteString.charCodeAt(i)
  72. }
  73. // Write the ArrayBuffer (or ArrayBufferView) to a blob:
  74. if (hasBlobConstructor) {
  75. return new Blob(
  76. [hasArrayBufferViewSupport ? intArray : arrayBuffer],
  77. {type: mediaType}
  78. )
  79. }
  80. bb = new BlobBuilder()
  81. bb.append(arrayBuffer)
  82. return bb.getBlob(mediaType)
  83. }
  84. if (window.HTMLCanvasElement && !CanvasPrototype.toBlob) {
  85. if (CanvasPrototype.mozGetAsFile) {
  86. CanvasPrototype.toBlob = function (callback, type, quality) {
  87. if (quality && CanvasPrototype.toDataURL && dataURLtoBlob) {
  88. callback(dataURLtoBlob(this.toDataURL(type, quality)))
  89. } else {
  90. callback(this.mozGetAsFile('blob', type))
  91. }
  92. }
  93. } else if (CanvasPrototype.toDataURL && dataURLtoBlob) {
  94. CanvasPrototype.toBlob = function (callback, type, quality) {
  95. callback(dataURLtoBlob(this.toDataURL(type, quality)))
  96. }
  97. }
  98. }
  99. if (typeof define === 'function' && define.amd) {
  100. define(function () {
  101. return dataURLtoBlob
  102. })
  103. } else if (typeof module === 'object' && module.exports) {
  104. module.exports = dataURLtoBlob
  105. } else {
  106. window.dataURLtoBlob = dataURLtoBlob
  107. }
  108. }(window))