archive-gh-me/StackBlur
1
0
Fork 0
mirror of https://github.com/flozz/StackBlur.git synced 2026-01-18 14:18:38 +00:00
Code Issues Projects Releases Wiki Activity

feat(image): add useOffsetWidth option for scaled images

Browse Source
This commit is contained in:
Luke Bennett 2020-07-16 12:18:06 +01:00 committed by Brett Zamir
parent 3b93c122bb
commit 7978c4c9a2
8 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dist/stackblur-es.js vendored
View File

@ -72,10 +72,11 @@ var shgTable = [9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 1
* @param {string|HTMLCanvasElement} canvas
* @param {Float} radius
* @param {boolean} blurAlphaChannel
* @param {boolean} useOffsetWidth
* @returns {undefined}
*/
function processImage(img, canvas, radius, blurAlphaChannel) {
function processImage(img, canvas, radius, blurAlphaChannel, useOffsetWidth) {
if (typeof img === 'string') {
img = document.getElementById(img);
}
@ -84,8 +85,9 @@ function processImage(img, canvas, radius, blurAlphaChannel) {
return;
}
var w = img.naturalWidth;
var h = img.naturalHeight;
var dimensionType = useOffsetWidth ? 'offset' : 'natural';
var w = img[dimensionType + 'Width'];
var h = img[dimensionType + 'Height'];
if (typeof canvas === 'string') {
canvas = document.getElementById(canvas);
@ -101,7 +103,7 @@ function processImage(img, canvas, radius, blurAlphaChannel) {
canvas.height = h;
var context = canvas.getContext('2d');
context.clearRect(0, 0, w, h);
context.drawImage(img, 0, 0);
context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, w, h);
if (isNaN(radius) || radius < 1) {
return;

2
dist/stackblur-es.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/stackblur-es.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/stackblur.js vendored
View File

@ -78,10 +78,11 @@
* @param {string|HTMLCanvasElement} canvas
* @param {Float} radius
* @param {boolean} blurAlphaChannel
* @param {boolean} useOffsetWidth
* @returns {undefined}
*/
function processImage(img, canvas, radius, blurAlphaChannel) {
function processImage(img, canvas, radius, blurAlphaChannel, useOffsetWidth) {
if (typeof img === 'string') {
img = document.getElementById(img);
}
@ -90,8 +91,9 @@
return;
}
var w = img.naturalWidth;
var h = img.naturalHeight;
var dimensionType = useOffsetWidth ? 'offset' : 'natural';
var w = img[dimensionType + 'Width'];
var h = img[dimensionType + 'Height'];
if (typeof canvas === 'string') {
canvas = document.getElementById(canvas);
@ -107,7 +109,7 @@
canvas.height = h;
var context = canvas.getContext('2d');
context.clearRect(0, 0, w, h);
context.drawImage(img, 0, 0);
context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, w, h);
if (isNaN(radius) || radius < 1) {
return;

2
dist/stackblur.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/stackblur.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
index.d.ts vendored
View File

@ -10,7 +10,8 @@ export function image(
img: HTMLImageElement | string,
canvas: HTMLCanvasElement | string,
radius: number,
blurAlphaChannel?: boolean
blurAlphaChannel?: boolean,
useOffsetWidth?: boolean,
): void;
export function canvasRGBA(

11
src/stackblur.js
View File

@ -84,17 +84,20 @@ const shgTable = [
* @param {string|HTMLCanvasElement} canvas
* @param {Float} radius
* @param {boolean} blurAlphaChannel
* @param {boolean} useOffsetWidth
* @returns {undefined}
*/
function processImage (img, canvas, radius, blurAlphaChannel) {
function processImage (img, canvas, radius, blurAlphaChannel, useOffsetWidth) {
if (typeof img === 'string') {
img = document.getElementById(img);
}
if (!img || !('naturalWidth' in img)) {
return;
}
const w = img.naturalWidth;
const h = img.naturalHeight;
const dimensionType = useOffsetWidth ? 'offset' : 'natural';
const w = img[dimensionType + 'Width'];
const h = img[dimensionType + 'Height'];
if (typeof canvas === 'string') {
canvas = document.getElementById(canvas);
@ -110,7 +113,7 @@ function processImage (img, canvas, radius, blurAlphaChannel) {
const context = canvas.getContext('2d');
context.clearRect(0, 0, w, h);
context.drawImage(img, 0, 0);
context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, w, h);
if (isNaN(radius) || radius < 1) { return; }