From d1f9faff4a713737ac3c541c134b0a7b9ea865a9 Mon Sep 17 00:00:00 2001 From: Brice Sanchez Date: Wed, 25 Jul 2018 23:13:52 -0400 Subject: [PATCH] Add canvas toBlob polyfill for older browsers and Edge https://github.com/blueimp/JavaScript-Canvas-to-Blob --- .../assets/config/refinery_core_manifest.js | 1 + .../assets/javascripts/canvas-to-blob.js | 126 ++++++++++++++++++ .../refinery/admin/images/_form.html.erb | 1 + 3 files changed, 128 insertions(+) create mode 100644 core/vendor/assets/javascripts/canvas-to-blob.js diff --git a/core/app/assets/config/refinery_core_manifest.js b/core/app/assets/config/refinery_core_manifest.js index 76c86c1514..d6212bc953 100644 --- a/core/app/assets/config/refinery_core_manifest.js +++ b/core/app/assets/config/refinery_core_manifest.js @@ -15,4 +15,5 @@ //= link cropper.css //= link cropper.js +//= link canvas-to-blob.js //= link refinery/image_crop.js \ No newline at end of file diff --git a/core/vendor/assets/javascripts/canvas-to-blob.js b/core/vendor/assets/javascripts/canvas-to-blob.js new file mode 100644 index 0000000000..44a965723a --- /dev/null +++ b/core/vendor/assets/javascripts/canvas-to-blob.js @@ -0,0 +1,126 @@ +/* + * JavaScript Canvas to Blob + * https://github.com/blueimp/JavaScript-Canvas-to-Blob + * + * Copyright 2012, Sebastian Tschan + * https://blueimp.net + * + * Licensed under the MIT license: + * https://opensource.org/licenses/MIT + * + * Based on stackoverflow user Stoive's code snippet: + * http://stackoverflow.com/q/4998908 + */ + +/* global atob, Blob, define */ + +;(function (window) { + 'use strict' + + var CanvasPrototype = + window.HTMLCanvasElement && window.HTMLCanvasElement.prototype + var hasBlobConstructor = + window.Blob && + (function () { + try { + return Boolean(new Blob()) + } catch (e) { + return false + } + })() + var hasArrayBufferViewSupport = + hasBlobConstructor && + window.Uint8Array && + (function () { + try { + return new Blob([new Uint8Array(100)]).size === 100 + } catch (e) { + return false + } + })() + var BlobBuilder = + window.BlobBuilder || + window.WebKitBlobBuilder || + window.MozBlobBuilder || + window.MSBlobBuilder + var dataURIPattern = /^data:((.*?)(;charset=.*?)?)(;base64)?,/ + var dataURLtoBlob = + (hasBlobConstructor || BlobBuilder) && + window.atob && + window.ArrayBuffer && + window.Uint8Array && + function (dataURI) { + var matches, + mediaType, + isBase64, + dataString, + byteString, + arrayBuffer, + intArray, + i, + bb + // Parse the dataURI components as per RFC 2397 + matches = dataURI.match(dataURIPattern) + if (!matches) { + throw new Error('invalid data URI') + } + // Default to text/plain;charset=US-ASCII + mediaType = matches[2] + ? matches[1] + : 'text/plain' + (matches[3] || ';charset=US-ASCII') + isBase64 = !!matches[4] + dataString = dataURI.slice(matches[0].length) + if (isBase64) { + // Convert base64 to raw binary data held in a string: + byteString = atob(dataString) + } else { + // Convert base64/URLEncoded data component to raw binary: + byteString = decodeURIComponent(dataString) + } + // Write the bytes of the string to an ArrayBuffer: + arrayBuffer = new ArrayBuffer(byteString.length) + intArray = new Uint8Array(arrayBuffer) + for (i = 0; i < byteString.length; i += 1) { + intArray[i] = byteString.charCodeAt(i) + } + // Write the ArrayBuffer (or ArrayBufferView) to a blob: + if (hasBlobConstructor) { + return new Blob([hasArrayBufferViewSupport ? intArray : arrayBuffer], { + type: mediaType + }) + } + bb = new BlobBuilder() + bb.append(arrayBuffer) + return bb.getBlob(mediaType) + } + if (window.HTMLCanvasElement && !CanvasPrototype.toBlob) { + if (CanvasPrototype.mozGetAsFile) { + CanvasPrototype.toBlob = function (callback, type, quality) { + var self = this + setTimeout(function () { + if (quality && CanvasPrototype.toDataURL && dataURLtoBlob) { + callback(dataURLtoBlob(self.toDataURL(type, quality))) + } else { + callback(self.mozGetAsFile('blob', type)) + } + }) + } + } else if (CanvasPrototype.toDataURL && dataURLtoBlob) { + CanvasPrototype.toBlob = function (callback, type, quality) { + var self = this + setTimeout(function () { + callback(dataURLtoBlob(self.toDataURL(type, quality))) + }) + } + } + } + if (typeof define === 'function' && define.amd) { + define(function () { + return dataURLtoBlob + }) + } else if (typeof module === 'object' && module.exports) { + module.exports = dataURLtoBlob + } else { + window.dataURLtoBlob = dataURLtoBlob + } +})(window) \ No newline at end of file diff --git a/images/app/views/refinery/admin/images/_form.html.erb b/images/app/views/refinery/admin/images/_form.html.erb index f9e6291ab1..bdcdf4dca5 100644 --- a/images/app/views/refinery/admin/images/_form.html.erb +++ b/images/app/views/refinery/admin/images/_form.html.erb @@ -108,6 +108,7 @@ <% content_for :after_javascript_libraries do %> <%= javascript_include_tag 'cropper' %> + <%= javascript_include_tag 'canvas-to-blob' %> <%= javascript_include_tag 'refinery/image_crop' %> <% end %>