From 51c4d47348f22affd7953d88ec6402fe79673bb9 Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Sun, 5 Mar 2017 22:32:37 +0000 Subject: [PATCH 1/6] chore(package): update dependencies https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 56d4840..8ae351a 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "babelify": "^7.3.0", "browserify": "^14.1.0", "expect.js": "^0.3.1", - "flow-bin": "^0.39.0", + "flow-bin": "^0.41.0", "flow-typed": "^2.0.0", "mocha": "^3.2.0", "sinon": "^1.17.7", From bff24b15bcff7579f6a543e322929c307b9a0167 Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Sun, 5 Mar 2017 22:34:17 +0000 Subject: [PATCH 2/6] docs(readme): add Greenkeeper badge https://greenkeeper.io/ --- Readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Readme.md b/Readme.md index eaafe70..d795e2b 100644 --- a/Readme.md +++ b/Readme.md @@ -1,4 +1,6 @@ # vintageJS + +[![Greenkeeper badge](https://badges.greenkeeper.io/rendro/vintageJS.svg)](https://greenkeeper.io/) > Add a retro/vintage effect to images using the HTML5 canvas element. From 685525118b105e7a46beae91219d38aba896587e Mon Sep 17 00:00:00 2001 From: Robert Fleischmann Date: Sun, 5 Mar 2017 18:21:28 -0500 Subject: [PATCH 3/6] add greenkeeper + badge --- Readme.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/Readme.md b/Readme.md index d795e2b..fcf5ffa 100644 --- a/Readme.md +++ b/Readme.md @@ -1,11 +1,10 @@ # vintageJS -[![Greenkeeper badge](https://badges.greenkeeper.io/rendro/vintageJS.svg)](https://greenkeeper.io/) > Add a retro/vintage effect to images using the HTML5 canvas element. - [![npm](https://img.shields.io/npm/v/vintagejs.svg?style=flat-square)]() [![npm](https://img.shields.io/npm/l/vintagejs.svg?style=flat-square)]() +[![Greenkeeper badge](https://badges.greenkeeper.io/rendro/vintageJS.svg)](https://greenkeeper.io/) ![](header.jpg) @@ -15,7 +14,6 @@ $ npm install vintagejs ``` - ## How to use `vintagejs` is a function that takes a source (URL, ImageElement or CanvasElement) and an effect (object with all the options) and returns a Promise that resolves to a result object. From d0b4016685d753d65c378006f37669cff08cc7bd Mon Sep 17 00:00:00 2001 From: Bjorn Date: Wed, 18 Oct 2017 16:45:53 +0200 Subject: [PATCH 4/6] ADDED improved gray effect --- src/index.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index b880d5a..e5fa82f 100644 --- a/src/index.js +++ b/src/index.js @@ -26,6 +26,7 @@ const defaultEffect: TEffect = { lighten: 0, viewfinder: false, sepia: false, + gray: false, brightness: 0, contrast: 0, }; @@ -89,7 +90,7 @@ const applyEffect = (effect: TEffect) => { const supportsBlendModes = ctx.globalCompositeOperation === 'multiply'; const data = ctx.getImageData(0, 0, width, height); const id = data.data.slice(0); - const { sepia, saturation } = effect; + const { sepia, saturation, gray } = effect; for (let i = id.length / 4; i >= 0; --i) { let ri = i << 2; @@ -108,6 +109,14 @@ const applyEffect = (effect: TEffect) => { ]; } + if (gray) { + [r, g, b] = [ + r * 0.21 + g * 0.72 + b * 0.07, + r * 0.21 + g * 0.72 + b * 0.07, + r * 0.21 + g * 0.72 + b * 0.07 + ]; + } + if (saturation < 1) { const avg = (r + g + b) / 3; r += (avg - r) * (1 - saturation); From 0152112c7a7187b225a23446bdde84a18dc4e447 Mon Sep 17 00:00:00 2001 From: Bjorn Date: Wed, 18 Oct 2017 16:58:11 +0200 Subject: [PATCH 5/6] UPDATED dist files --- dist/vintage.js | 11 ++++++++++- dist/vintage.min.js | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/dist/vintage.js b/dist/vintage.js index 08493ee..7de79aa 100644 --- a/dist/vintage.js +++ b/dist/vintage.js @@ -31,6 +31,7 @@ var defaultEffect = { lighten: 0, viewfinder: false, sepia: false, + gray: false, brightness: 0, contrast: 0 }; @@ -120,7 +121,8 @@ var applyEffect = function applyEffect(effect) { var data = ctx.getImageData(0, 0, width, height); var id = data.data.slice(0); var sepia = effect.sepia, - saturation = effect.saturation; + saturation = effect.saturation, + gray = effect.gray; for (var i = id.length / 4; i >= 0; --i) { @@ -139,6 +141,13 @@ var applyEffect = function applyEffect(effect) { b = _ref3[2]; } + if (gray) { + var _ref4 = [r * 0.21 + g * 0.72 + b * 0.07, r * 0.21 + g * 0.72 + b * 0.07, r * 0.21 + g * 0.72 + b * 0.07]; + r = _ref4[0]; + g = _ref4[1]; + b = _ref4[2]; + } + if (saturation < 1) { var avg = (r + g + b) / 3; r += (avg - r) * (1 - saturation); diff --git a/dist/vintage.min.js b/dist/vintage.min.js index e3751fa..7e912a9 100644 --- a/dist/vintage.min.js +++ b/dist/vintage.min.js @@ -1 +1 @@ -(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.vintagejs=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o=0;--i){var ri=i<<2;var gi=ri+1;var bi=ri+2;var r=LUT[0][id[ri]];var g=LUT[1][id[gi]];var b=LUT[2][id[bi]];if(sepia){var _ref3=[r*.393+g*.769+b*.189,r*.349+g*.686+b*.168,r*.272+g*.534+b*.131];r=_ref3[0];g=_ref3[1];b=_ref3[2]}if(saturation<1){var avg=(r+g+b)/3;r+=(avg-r)*(1-saturation);g+=(avg-g)*(1-saturation);b+=(avg-b)*(1-saturation)}id[ri]=r;id[gi]=g;id[bi]=b}data.data.set(id);ctx.putImageData(data,0,0);if(effect.vignette){ctx.globalCompositeOperation=supportsBlendModes?"multiply":"source-over";ctx.fillStyle=(0,_utils.getGradient)(ctx,width,height,["rgba(0,0,0,0)","rgba(0,0,0,0)","rgba(0,0,0,"+effect.vignette+")"]);ctx.fillRect(0,0,width,height)}if(effect.lighten){ctx.globalCompositeOperation=supportsBlendModes?"screen":"lighter";ctx.fillStyle=(0,_utils.getGradient)(ctx,width,height,["rgba(255,255,255,"+effect.lighten+")","rgba(255,255,255,0)","rgba(0,0,0,0)"]);ctx.fillRect(0,0,width,height)}if(!effect.viewfinder){return resolve((0,_utils.getResult)(canvas))}return(0,_utils.loadImageWithCache)(effect.viewfinder).then(function(img){if(supportsBlendModes){ctx.globalCompositeOperation="multiply";ctx.drawImage(img,0,0,width,height)}else{var _createCanvasAndCtxFr=(0,_utils.createCanvasAndCtxFromImage)(img,width,height),_createCanvasAndCtxFr2=_slicedToArray(_createCanvasAndCtxFr,2),_=_createCanvasAndCtxFr2[0],vfCtx=_createCanvasAndCtxFr2[1];var _vfCtx$getImageData=vfCtx.getImageData(0,0,width,height),vfData=_vfCtx$getImageData.data;var imageData=ctx.getImageData(0,0,width,height);imageData.data.set(imageData.data.map(function(v,i){return v*vfData[i]/255}));ctx.putImageData(imageData,0,0)}return resolve((0,_utils.getResult)(canvas))})})}};exports.default=function(src,partialEffect){var genSource=typeof src==="string"?(0,_utils.loadImage)(src).then(_utils.getCanvasAndCtx):Promise.resolve((0,_utils.getCanvasAndCtx)(src));return genSource.then(applyEffect(_extends({},defaultEffect,partialEffect)))};module.exports=exports["default"]},{"./utils.js":3}],3:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.getResult=exports.loadImageWithCache=exports.loadImage=exports.getGradient=exports.getCanvasAndCtx=exports.cloneCanvasAndCtx=exports.createCanvasAndCtxFromImage=exports.compose=undefined;var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};var _nullthrows=require("nullthrows");var _nullthrows2=_interopRequireDefault(_nullthrows);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}var IMAGE_TYPE="image/jpeg";var IMAGE_QUALITY=1;var compose=exports.compose=function compose(f,g){return function(x){return f(g(x))}};var createCanvasAndCtxFromImage=exports.createCanvasAndCtxFromImage=function createCanvasAndCtxFromImage(el,width,height){var canvas=document.createElement("canvas");if(!width)width=el.width;if(!height)height=el.height;canvas.width=width;canvas.height=height;var ctx=(0,_nullthrows2.default)(canvas.getContext("2d"),"Could not get 2d context for canvas");ctx.drawImage(el,0,0,width,height);return[canvas,ctx]};var cloneCanvasAndCtx=exports.cloneCanvasAndCtx=function cloneCanvasAndCtx(source){var width=source.width,height=source.height;var target=document.createElement("canvas");var targetCtx=(0,_nullthrows2.default)(target.getContext("2d"),"Could not get 2d context for canvas");target.width=width;target.height=height;targetCtx.drawImage(source,0,0,width,height);return[target,targetCtx]};var getCanvasAndCtx=exports.getCanvasAndCtx=function getCanvasAndCtx(el){if(el instanceof HTMLImageElement){return createCanvasAndCtxFromImage(el)}if(el instanceof HTMLCanvasElement){return cloneCanvasAndCtx(el)}throw new Error("Unsupported source element. Expected HTMLCanvasElement or HTMLImageElement, got "+(typeof el==="undefined"?"undefined":_typeof(el))+".")};var getGradient=exports.getGradient=function getGradient(ctx,width,height,colorSteps){var gradient=ctx.createRadialGradient(width/2,height/2,0,width/2,height/2,Math.sqrt(Math.pow(width/2,2)+Math.pow(height/2,2)));colorSteps.forEach(function(color,idx,steps){gradient.addColorStop(idx/(steps.length-1),color)});return gradient};var loadImage=exports.loadImage=function loadImage(src){return new Promise(function(resolve,reject){var img=new Image;img.onload=function(){return resolve(img)};img.onerror=function(err){return reject(err)};img.src=src})};var loadImageWithCache=exports.loadImageWithCache=function(){var cache={};return function(src){return cache[src]?Promise.resolve(cache[src]):loadImage(src).then(function(img){cache[src]=img;return img})}}();var getResult=exports.getResult=function getResult(canvas){return{getDataURL:function getDataURL(){var mimeType=arguments.length>0&&arguments[0]!==undefined?arguments[0]:IMAGE_TYPE;var quality=arguments.length>1&&arguments[1]!==undefined?arguments[1]:IMAGE_QUALITY;return canvas.toDataURL(mimeType,quality)},getCanvas:function getCanvas(){return canvas},genImage:function genImage(){var mimeType=arguments.length>0&&arguments[0]!==undefined?arguments[0]:IMAGE_TYPE;var quality=arguments.length>1&&arguments[1]!==undefined?arguments[1]:IMAGE_QUALITY;return loadImage(canvas.toDataURL(mimeType,quality))}}}},{nullthrows:1}]},{},[2])(2)}); +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.vintagejs=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o=0;--i){var ri=i<<2;var gi=ri+1;var bi=ri+2;var r=LUT[0][id[ri]];var g=LUT[1][id[gi]];var b=LUT[2][id[bi]];if(sepia){var _ref3=[r*.393+g*.769+b*.189,r*.349+g*.686+b*.168,r*.272+g*.534+b*.131];r=_ref3[0];g=_ref3[1];b=_ref3[2]}if(gray){var _ref4=[r*.21+g*.72+b*.07,r*.21+g*.72+b*.07,r*.21+g*.72+b*.07];r=_ref4[0];g=_ref4[1];b=_ref4[2]}if(saturation<1){var avg=(r+g+b)/3;r+=(avg-r)*(1-saturation);g+=(avg-g)*(1-saturation);b+=(avg-b)*(1-saturation)}id[ri]=r;id[gi]=g;id[bi]=b}data.data.set(id);ctx.putImageData(data,0,0);if(effect.vignette){ctx.globalCompositeOperation=supportsBlendModes?"multiply":"source-over";ctx.fillStyle=(0,_utils.getGradient)(ctx,width,height,["rgba(0,0,0,0)","rgba(0,0,0,0)","rgba(0,0,0,"+effect.vignette+")"]);ctx.fillRect(0,0,width,height)}if(effect.lighten){ctx.globalCompositeOperation=supportsBlendModes?"screen":"lighter";ctx.fillStyle=(0,_utils.getGradient)(ctx,width,height,["rgba(255,255,255,"+effect.lighten+")","rgba(255,255,255,0)","rgba(0,0,0,0)"]);ctx.fillRect(0,0,width,height)}if(!effect.viewfinder){return resolve((0,_utils.getResult)(canvas))}return(0,_utils.loadImageWithCache)(effect.viewfinder).then(function(img){if(supportsBlendModes){ctx.globalCompositeOperation="multiply";ctx.drawImage(img,0,0,width,height)}else{var _createCanvasAndCtxFr=(0,_utils.createCanvasAndCtxFromImage)(img,width,height),_createCanvasAndCtxFr2=_slicedToArray(_createCanvasAndCtxFr,2),_=_createCanvasAndCtxFr2[0],vfCtx=_createCanvasAndCtxFr2[1];var _vfCtx$getImageData=vfCtx.getImageData(0,0,width,height),vfData=_vfCtx$getImageData.data;var imageData=ctx.getImageData(0,0,width,height);imageData.data.set(imageData.data.map(function(v,i){return v*vfData[i]/255}));ctx.putImageData(imageData,0,0)}return resolve((0,_utils.getResult)(canvas))})})}};exports.default=function(src,partialEffect){var genSource=typeof src==="string"?(0,_utils.loadImage)(src).then(_utils.getCanvasAndCtx):Promise.resolve((0,_utils.getCanvasAndCtx)(src));return genSource.then(applyEffect(_extends({},defaultEffect,partialEffect)))};module.exports=exports["default"]},{"./utils.js":3}],3:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.getResult=exports.loadImageWithCache=exports.loadImage=exports.getGradient=exports.getCanvasAndCtx=exports.cloneCanvasAndCtx=exports.createCanvasAndCtxFromImage=exports.compose=undefined;var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};var _nullthrows=require("nullthrows");var _nullthrows2=_interopRequireDefault(_nullthrows);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}var IMAGE_TYPE="image/jpeg";var IMAGE_QUALITY=1;var compose=exports.compose=function compose(f,g){return function(x){return f(g(x))}};var createCanvasAndCtxFromImage=exports.createCanvasAndCtxFromImage=function createCanvasAndCtxFromImage(el,width,height){var canvas=document.createElement("canvas");if(!width)width=el.width;if(!height)height=el.height;canvas.width=width;canvas.height=height;var ctx=(0,_nullthrows2.default)(canvas.getContext("2d"),"Could not get 2d context for canvas");ctx.drawImage(el,0,0,width,height);return[canvas,ctx]};var cloneCanvasAndCtx=exports.cloneCanvasAndCtx=function cloneCanvasAndCtx(source){var width=source.width,height=source.height;var target=document.createElement("canvas");var targetCtx=(0,_nullthrows2.default)(target.getContext("2d"),"Could not get 2d context for canvas");target.width=width;target.height=height;targetCtx.drawImage(source,0,0,width,height);return[target,targetCtx]};var getCanvasAndCtx=exports.getCanvasAndCtx=function getCanvasAndCtx(el){if(el instanceof HTMLImageElement){return createCanvasAndCtxFromImage(el)}if(el instanceof HTMLCanvasElement){return cloneCanvasAndCtx(el)}throw new Error("Unsupported source element. Expected HTMLCanvasElement or HTMLImageElement, got "+(typeof el==="undefined"?"undefined":_typeof(el))+".")};var getGradient=exports.getGradient=function getGradient(ctx,width,height,colorSteps){var gradient=ctx.createRadialGradient(width/2,height/2,0,width/2,height/2,Math.sqrt(Math.pow(width/2,2)+Math.pow(height/2,2)));colorSteps.forEach(function(color,idx,steps){gradient.addColorStop(idx/(steps.length-1),color)});return gradient};var loadImage=exports.loadImage=function loadImage(src){return new Promise(function(resolve,reject){var img=new Image;img.onload=function(){return resolve(img)};img.onerror=function(err){return reject(err)};img.src=src})};var loadImageWithCache=exports.loadImageWithCache=function(){var cache={};return function(src){return cache[src]?Promise.resolve(cache[src]):loadImage(src).then(function(img){cache[src]=img;return img})}}();var getResult=exports.getResult=function getResult(canvas){return{getDataURL:function getDataURL(){var mimeType=arguments.length>0&&arguments[0]!==undefined?arguments[0]:IMAGE_TYPE;var quality=arguments.length>1&&arguments[1]!==undefined?arguments[1]:IMAGE_QUALITY;return canvas.toDataURL(mimeType,quality)},getCanvas:function getCanvas(){return canvas},genImage:function genImage(){var mimeType=arguments.length>0&&arguments[0]!==undefined?arguments[0]:IMAGE_TYPE;var quality=arguments.length>1&&arguments[1]!==undefined?arguments[1]:IMAGE_QUALITY;return loadImage(canvas.toDataURL(mimeType,quality))}}}},{nullthrows:1}]},{},[2])(2)}); From 5c57c4cffc759b03ec87090b4f849034577a2762 Mon Sep 17 00:00:00 2001 From: Bjorn Date: Thu, 19 Oct 2017 15:48:45 +0200 Subject: [PATCH 6/6] ADDED crossOrigin header for loading viewfinder images --- dist/vintage.js | 1 + dist/vintage.min.js | 2 +- src/utils.js | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/dist/vintage.js b/dist/vintage.js index 7de79aa..2c8e58b 100644 --- a/dist/vintage.js +++ b/dist/vintage.js @@ -289,6 +289,7 @@ var loadImage = exports.loadImage = function loadImage(src) { img.onload = function () { return resolve(img); }; + img.crossOrigin = 'anonymous'; img.onerror = function (err) { return reject(err); }; diff --git a/dist/vintage.min.js b/dist/vintage.min.js index 7e912a9..e03b5e4 100644 --- a/dist/vintage.min.js +++ b/dist/vintage.min.js @@ -1 +1 @@ -(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.vintagejs=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o=0;--i){var ri=i<<2;var gi=ri+1;var bi=ri+2;var r=LUT[0][id[ri]];var g=LUT[1][id[gi]];var b=LUT[2][id[bi]];if(sepia){var _ref3=[r*.393+g*.769+b*.189,r*.349+g*.686+b*.168,r*.272+g*.534+b*.131];r=_ref3[0];g=_ref3[1];b=_ref3[2]}if(gray){var _ref4=[r*.21+g*.72+b*.07,r*.21+g*.72+b*.07,r*.21+g*.72+b*.07];r=_ref4[0];g=_ref4[1];b=_ref4[2]}if(saturation<1){var avg=(r+g+b)/3;r+=(avg-r)*(1-saturation);g+=(avg-g)*(1-saturation);b+=(avg-b)*(1-saturation)}id[ri]=r;id[gi]=g;id[bi]=b}data.data.set(id);ctx.putImageData(data,0,0);if(effect.vignette){ctx.globalCompositeOperation=supportsBlendModes?"multiply":"source-over";ctx.fillStyle=(0,_utils.getGradient)(ctx,width,height,["rgba(0,0,0,0)","rgba(0,0,0,0)","rgba(0,0,0,"+effect.vignette+")"]);ctx.fillRect(0,0,width,height)}if(effect.lighten){ctx.globalCompositeOperation=supportsBlendModes?"screen":"lighter";ctx.fillStyle=(0,_utils.getGradient)(ctx,width,height,["rgba(255,255,255,"+effect.lighten+")","rgba(255,255,255,0)","rgba(0,0,0,0)"]);ctx.fillRect(0,0,width,height)}if(!effect.viewfinder){return resolve((0,_utils.getResult)(canvas))}return(0,_utils.loadImageWithCache)(effect.viewfinder).then(function(img){if(supportsBlendModes){ctx.globalCompositeOperation="multiply";ctx.drawImage(img,0,0,width,height)}else{var _createCanvasAndCtxFr=(0,_utils.createCanvasAndCtxFromImage)(img,width,height),_createCanvasAndCtxFr2=_slicedToArray(_createCanvasAndCtxFr,2),_=_createCanvasAndCtxFr2[0],vfCtx=_createCanvasAndCtxFr2[1];var _vfCtx$getImageData=vfCtx.getImageData(0,0,width,height),vfData=_vfCtx$getImageData.data;var imageData=ctx.getImageData(0,0,width,height);imageData.data.set(imageData.data.map(function(v,i){return v*vfData[i]/255}));ctx.putImageData(imageData,0,0)}return resolve((0,_utils.getResult)(canvas))})})}};exports.default=function(src,partialEffect){var genSource=typeof src==="string"?(0,_utils.loadImage)(src).then(_utils.getCanvasAndCtx):Promise.resolve((0,_utils.getCanvasAndCtx)(src));return genSource.then(applyEffect(_extends({},defaultEffect,partialEffect)))};module.exports=exports["default"]},{"./utils.js":3}],3:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.getResult=exports.loadImageWithCache=exports.loadImage=exports.getGradient=exports.getCanvasAndCtx=exports.cloneCanvasAndCtx=exports.createCanvasAndCtxFromImage=exports.compose=undefined;var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};var _nullthrows=require("nullthrows");var _nullthrows2=_interopRequireDefault(_nullthrows);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}var IMAGE_TYPE="image/jpeg";var IMAGE_QUALITY=1;var compose=exports.compose=function compose(f,g){return function(x){return f(g(x))}};var createCanvasAndCtxFromImage=exports.createCanvasAndCtxFromImage=function createCanvasAndCtxFromImage(el,width,height){var canvas=document.createElement("canvas");if(!width)width=el.width;if(!height)height=el.height;canvas.width=width;canvas.height=height;var ctx=(0,_nullthrows2.default)(canvas.getContext("2d"),"Could not get 2d context for canvas");ctx.drawImage(el,0,0,width,height);return[canvas,ctx]};var cloneCanvasAndCtx=exports.cloneCanvasAndCtx=function cloneCanvasAndCtx(source){var width=source.width,height=source.height;var target=document.createElement("canvas");var targetCtx=(0,_nullthrows2.default)(target.getContext("2d"),"Could not get 2d context for canvas");target.width=width;target.height=height;targetCtx.drawImage(source,0,0,width,height);return[target,targetCtx]};var getCanvasAndCtx=exports.getCanvasAndCtx=function getCanvasAndCtx(el){if(el instanceof HTMLImageElement){return createCanvasAndCtxFromImage(el)}if(el instanceof HTMLCanvasElement){return cloneCanvasAndCtx(el)}throw new Error("Unsupported source element. Expected HTMLCanvasElement or HTMLImageElement, got "+(typeof el==="undefined"?"undefined":_typeof(el))+".")};var getGradient=exports.getGradient=function getGradient(ctx,width,height,colorSteps){var gradient=ctx.createRadialGradient(width/2,height/2,0,width/2,height/2,Math.sqrt(Math.pow(width/2,2)+Math.pow(height/2,2)));colorSteps.forEach(function(color,idx,steps){gradient.addColorStop(idx/(steps.length-1),color)});return gradient};var loadImage=exports.loadImage=function loadImage(src){return new Promise(function(resolve,reject){var img=new Image;img.onload=function(){return resolve(img)};img.onerror=function(err){return reject(err)};img.src=src})};var loadImageWithCache=exports.loadImageWithCache=function(){var cache={};return function(src){return cache[src]?Promise.resolve(cache[src]):loadImage(src).then(function(img){cache[src]=img;return img})}}();var getResult=exports.getResult=function getResult(canvas){return{getDataURL:function getDataURL(){var mimeType=arguments.length>0&&arguments[0]!==undefined?arguments[0]:IMAGE_TYPE;var quality=arguments.length>1&&arguments[1]!==undefined?arguments[1]:IMAGE_QUALITY;return canvas.toDataURL(mimeType,quality)},getCanvas:function getCanvas(){return canvas},genImage:function genImage(){var mimeType=arguments.length>0&&arguments[0]!==undefined?arguments[0]:IMAGE_TYPE;var quality=arguments.length>1&&arguments[1]!==undefined?arguments[1]:IMAGE_QUALITY;return loadImage(canvas.toDataURL(mimeType,quality))}}}},{nullthrows:1}]},{},[2])(2)}); +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.vintagejs=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o=0;--i){var ri=i<<2;var gi=ri+1;var bi=ri+2;var r=LUT[0][id[ri]];var g=LUT[1][id[gi]];var b=LUT[2][id[bi]];if(sepia){var _ref3=[r*.393+g*.769+b*.189,r*.349+g*.686+b*.168,r*.272+g*.534+b*.131];r=_ref3[0];g=_ref3[1];b=_ref3[2]}if(gray){var _ref4=[r*.21+g*.72+b*.07,r*.21+g*.72+b*.07,r*.21+g*.72+b*.07];r=_ref4[0];g=_ref4[1];b=_ref4[2]}if(saturation<1){var avg=(r+g+b)/3;r+=(avg-r)*(1-saturation);g+=(avg-g)*(1-saturation);b+=(avg-b)*(1-saturation)}id[ri]=r;id[gi]=g;id[bi]=b}data.data.set(id);ctx.putImageData(data,0,0);if(effect.vignette){ctx.globalCompositeOperation=supportsBlendModes?"multiply":"source-over";ctx.fillStyle=(0,_utils.getGradient)(ctx,width,height,["rgba(0,0,0,0)","rgba(0,0,0,0)","rgba(0,0,0,"+effect.vignette+")"]);ctx.fillRect(0,0,width,height)}if(effect.lighten){ctx.globalCompositeOperation=supportsBlendModes?"screen":"lighter";ctx.fillStyle=(0,_utils.getGradient)(ctx,width,height,["rgba(255,255,255,"+effect.lighten+")","rgba(255,255,255,0)","rgba(0,0,0,0)"]);ctx.fillRect(0,0,width,height)}if(!effect.viewfinder){return resolve((0,_utils.getResult)(canvas))}return(0,_utils.loadImageWithCache)(effect.viewfinder).then(function(img){if(supportsBlendModes){ctx.globalCompositeOperation="multiply";ctx.drawImage(img,0,0,width,height)}else{var _createCanvasAndCtxFr=(0,_utils.createCanvasAndCtxFromImage)(img,width,height),_createCanvasAndCtxFr2=_slicedToArray(_createCanvasAndCtxFr,2),_=_createCanvasAndCtxFr2[0],vfCtx=_createCanvasAndCtxFr2[1];var _vfCtx$getImageData=vfCtx.getImageData(0,0,width,height),vfData=_vfCtx$getImageData.data;var imageData=ctx.getImageData(0,0,width,height);imageData.data.set(imageData.data.map(function(v,i){return v*vfData[i]/255}));ctx.putImageData(imageData,0,0)}return resolve((0,_utils.getResult)(canvas))})})}};exports.default=function(src,partialEffect){var genSource=typeof src==="string"?(0,_utils.loadImage)(src).then(_utils.getCanvasAndCtx):Promise.resolve((0,_utils.getCanvasAndCtx)(src));return genSource.then(applyEffect(_extends({},defaultEffect,partialEffect)))};module.exports=exports["default"]},{"./utils.js":3}],3:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.getResult=exports.loadImageWithCache=exports.loadImage=exports.getGradient=exports.getCanvasAndCtx=exports.cloneCanvasAndCtx=exports.createCanvasAndCtxFromImage=exports.compose=undefined;var _typeof=typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?function(obj){return typeof obj}:function(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj};var _nullthrows=require("nullthrows");var _nullthrows2=_interopRequireDefault(_nullthrows);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}var IMAGE_TYPE="image/jpeg";var IMAGE_QUALITY=1;var compose=exports.compose=function compose(f,g){return function(x){return f(g(x))}};var createCanvasAndCtxFromImage=exports.createCanvasAndCtxFromImage=function createCanvasAndCtxFromImage(el,width,height){var canvas=document.createElement("canvas");if(!width)width=el.width;if(!height)height=el.height;canvas.width=width;canvas.height=height;var ctx=(0,_nullthrows2.default)(canvas.getContext("2d"),"Could not get 2d context for canvas");ctx.drawImage(el,0,0,width,height);return[canvas,ctx]};var cloneCanvasAndCtx=exports.cloneCanvasAndCtx=function cloneCanvasAndCtx(source){var width=source.width,height=source.height;var target=document.createElement("canvas");var targetCtx=(0,_nullthrows2.default)(target.getContext("2d"),"Could not get 2d context for canvas");target.width=width;target.height=height;targetCtx.drawImage(source,0,0,width,height);return[target,targetCtx]};var getCanvasAndCtx=exports.getCanvasAndCtx=function getCanvasAndCtx(el){if(el instanceof HTMLImageElement){return createCanvasAndCtxFromImage(el)}if(el instanceof HTMLCanvasElement){return cloneCanvasAndCtx(el)}throw new Error("Unsupported source element. Expected HTMLCanvasElement or HTMLImageElement, got "+(typeof el==="undefined"?"undefined":_typeof(el))+".")};var getGradient=exports.getGradient=function getGradient(ctx,width,height,colorSteps){var gradient=ctx.createRadialGradient(width/2,height/2,0,width/2,height/2,Math.sqrt(Math.pow(width/2,2)+Math.pow(height/2,2)));colorSteps.forEach(function(color,idx,steps){gradient.addColorStop(idx/(steps.length-1),color)});return gradient};var loadImage=exports.loadImage=function loadImage(src){return new Promise(function(resolve,reject){var img=new Image;img.onload=function(){return resolve(img)};img.crossOrigin="anonymous";img.onerror=function(err){return reject(err)};img.src=src})};var loadImageWithCache=exports.loadImageWithCache=function(){var cache={};return function(src){return cache[src]?Promise.resolve(cache[src]):loadImage(src).then(function(img){cache[src]=img;return img})}}();var getResult=exports.getResult=function getResult(canvas){return{getDataURL:function getDataURL(){var mimeType=arguments.length>0&&arguments[0]!==undefined?arguments[0]:IMAGE_TYPE;var quality=arguments.length>1&&arguments[1]!==undefined?arguments[1]:IMAGE_QUALITY;return canvas.toDataURL(mimeType,quality)},getCanvas:function getCanvas(){return canvas},genImage:function genImage(){var mimeType=arguments.length>0&&arguments[0]!==undefined?arguments[0]:IMAGE_TYPE;var quality=arguments.length>1&&arguments[1]!==undefined?arguments[1]:IMAGE_QUALITY;return loadImage(canvas.toDataURL(mimeType,quality))}}}},{nullthrows:1}]},{},[2])(2)}); diff --git a/src/utils.js b/src/utils.js index 06c54a8..2aaae35 100644 --- a/src/utils.js +++ b/src/utils.js @@ -88,6 +88,7 @@ export const loadImage = (src: string): Promise => new Promise(( ) => { const img = new Image(); img.onload = () => resolve(img); + img.crossOrigin = 'anonymous'; img.onerror = (err: Error): void => reject(err); img.src = src; });