From bd2e379656081ece3305f783597e8186c406e6c9 Mon Sep 17 00:00:00 2001 From: Olli Meier Date: Fri, 15 Nov 2024 07:07:42 +0100 Subject: [PATCH 1/5] Add dialog for background image --- src/fontra/client/core/ui-utils.js | 69 ++++++++++ src/fontra/client/lang/de.js | 3 + src/fontra/client/lang/en.js | 3 + src/fontra/client/lang/fr.js | 3 + src/fontra/client/lang/ja.js | 3 + src/fontra/client/lang/nl.js | 3 + src/fontra/client/lang/zh-CN.js | 3 + src/fontra/views/editor/edit-tools-pointer.js | 8 ++ src/fontra/views/editor/editor.js | 128 +++++++++++++++++- 9 files changed, 222 insertions(+), 1 deletion(-) diff --git a/src/fontra/client/core/ui-utils.js b/src/fontra/client/core/ui-utils.js index 7edad168a..0903c5e2e 100644 --- a/src/fontra/client/core/ui-utils.js +++ b/src/fontra/client/core/ui-utils.js @@ -171,6 +171,75 @@ export function labeledTextInput(label, controller, key, options) { return items; } +export function labeledColorInput(label, controller, key, options) { + const inputElement = colorInput(controller, key, options); + const items = [labelForElement(label, inputElement), inputElement]; + + return items; +} + +export function colorInput(controller, key, options) { + const inputID = options?.id || `color-input-${uniqueID()}-${key}`; + const style = + options?.style || + ` + margin: 0; + padding: 0; + outline: none; + border: none; + border-color: transparent; + border-radius: 0.25em; + width: 100%;`; + const inputElement = html.input({ type: "color", id: inputID, style: style }); + inputElement.value = controller.model[key]; + + inputElement.onchange = () => { + controller.model[key] = inputElement.value; + }; + + controller.addKeyListener(key, (event) => { + inputElement.value = event.newValue; + }); + + return inputElement; +} + +export function labeledSliderInput(label, controller, key, options) { + const inputElement = sliderInput(controller, key, options); + const items = [labelForElement(label, inputElement), inputElement]; + + return items; +} + +// for now keep it as is, but maybe better use: return html.createDomElement("range-slider", parms); +export function sliderInput(controller, key, options) { + const inputID = options?.id || `range-input-${uniqueID()}-${key}`; + const min = options?.min || 0; + const max = options?.max || 100; + const value = options?.value || 0; + const step = options?.step || 1; + + const inputElement = html.input({ + type: "range", + id: inputID, + min: min, + max: max, + step: step, + value: value, + }); + inputElement.value = controller.model[key]; + + inputElement.onchange = () => { + controller.model[key] = inputElement.value; + }; + + controller.addKeyListener(key, (event) => { + inputElement.value = event.newValue; + }); + + return inputElement; +} + export const DefaultFormatter = { toString: (value) => (value !== undefined && value !== null ? value.toString() : ""), fromString: (value) => { diff --git a/src/fontra/client/lang/de.js b/src/fontra/client/lang/de.js index 24e15d3e4..995cad531 100644 --- a/src/fontra/client/lang/de.js +++ b/src/fontra/client/lang/de.js @@ -25,6 +25,7 @@ export const strings = { "action.delete-glyph": "Glyph entfernen", "action.delete-selection": "Auswahl entfernen", "action.edit-anchor": "Anker bearbeiten", + "action.edit-background-image": "Hintergrund-Bild bearbeiten", "action.edit-guideline": "Hilfslinie bearbeiten", "action.export-as.designspace": "Designspace + UFO (*.designspace)", "action.export-as.fontra": "Fontra (*.fontra)", @@ -94,6 +95,8 @@ export const strings = { "axes.undo.add": "Achse %0 hinzufügen", "axes.undo.delete": "Achse %0 entfernen", "axes.undo.edit": "Achse %0 bearbeiten", + "backgroundImage.labels.color": "Farbe", + "backgroundImage.labels.opacity": "Opacity", "canvas.clean-view-and-hand-tool": "Ungehinderte Sicht und Hand Werkzeug", "cross-axis-mapping.axis-participates": "Wenn markiert, dann ist diese Achse teil des Mappings", diff --git a/src/fontra/client/lang/en.js b/src/fontra/client/lang/en.js index 9df6f5ddd..daf39a83a 100644 --- a/src/fontra/client/lang/en.js +++ b/src/fontra/client/lang/en.js @@ -25,6 +25,7 @@ export const strings = { "action.delete-glyph": "Delete Glyph", "action.delete-selection": "Delete Selection", "action.edit-anchor": "Edit Anchor", + "action.edit-background-image": "Edit Background Image", "action.edit-guideline": "Edit Guideline", "action.export-as.designspace": "Designspace + UFO (*.designspace)", "action.export-as.fontra": "Fontra (*.fontra)", @@ -94,6 +95,8 @@ export const strings = { "axes.undo.add": "add axis %0", "axes.undo.delete": "delete axis %0", "axes.undo.edit": "edit axis %0", + "backgroundImage.labels.color": "Color", + "backgroundImage.labels.opacity": "Opacity", "canvas.clean-view-and-hand-tool": "Clean View and Hand Tool", "cross-axis-mapping.axis-participates": "When checked, this axis participates in the mapping", diff --git a/src/fontra/client/lang/fr.js b/src/fontra/client/lang/fr.js index e40a7af02..db9462bc7 100644 --- a/src/fontra/client/lang/fr.js +++ b/src/fontra/client/lang/fr.js @@ -25,6 +25,7 @@ export const strings = { "action.delete-glyph": "Supprimer le glyphe", "action.delete-selection": "Supprimer la sélection", "action.edit-anchor": "Edit Anchor", + "action.edit-background-image": "Edit Background Image", "action.edit-guideline": "Edit Guideline", "action.export-as.designspace": "Designspace + UFO (*.designspace)", "action.export-as.fontra": "Fontra (*.fontra)", @@ -94,6 +95,8 @@ export const strings = { "axes.undo.add": "add axis %0", "axes.undo.delete": "delete axis %0", "axes.undo.edit": "edit axis %0", + "backgroundImage.labels.color": "Color", + "backgroundImage.labels.opacity": "Opacity", "canvas.clean-view-and-hand-tool": "Prévisualisation et outil de déplacement", "cross-axis-mapping.axis-participates": "When checked, this axis participates in the mapping", diff --git a/src/fontra/client/lang/ja.js b/src/fontra/client/lang/ja.js index ffb978860..24f97fbb1 100644 --- a/src/fontra/client/lang/ja.js +++ b/src/fontra/client/lang/ja.js @@ -25,6 +25,7 @@ export const strings = { "action.delete-glyph": "グリフを削除", "action.delete-selection": "選択範囲を削除", "action.edit-anchor": "アンカーを編集", + "action.edit-background-image": "Edit Background Image", "action.edit-guideline": "ガイドラインを編集", "action.export-as.designspace": "Designspace + UFO (*.designspace)", "action.export-as.fontra": "Fontra (*.fontra)", @@ -94,6 +95,8 @@ export const strings = { "axes.undo.add": "補完軸%0を追加", "axes.undo.delete": "補完軸%0を削除", "axes.undo.edit": "補完軸%0を編集", + "backgroundImage.labels.color": "Color", + "backgroundImage.labels.opacity": "Opacity", "canvas.clean-view-and-hand-tool": "塗りのプレビューと手のひらツール", "cross-axis-mapping.axis-participates": "チェックすると、この補完軸がマッピング内で有効になります", diff --git a/src/fontra/client/lang/nl.js b/src/fontra/client/lang/nl.js index 0be20fafc..db4bec55e 100644 --- a/src/fontra/client/lang/nl.js +++ b/src/fontra/client/lang/nl.js @@ -25,6 +25,7 @@ export const strings = { "action.delete-glyph": "Verwijder glyph", "action.delete-selection": "Verwijder selectie", "action.edit-anchor": "Edit Anchor", + "action.edit-background-image": "Edit Background Image", "action.edit-guideline": "Edit Guideline", "action.export-as.designspace": "Designspace + UFO (*.designspace)", "action.export-as.fontra": "Fontra (*.fontra)", @@ -94,6 +95,8 @@ export const strings = { "axes.undo.add": "add axis %0", "axes.undo.delete": "delete axis %0", "axes.undo.edit": "edit axis %0", + "backgroundImage.labels.color": "Color", + "backgroundImage.labels.opacity": "Opacity", "canvas.clean-view-and-hand-tool": "Schone weergave en Hand gereedschap", "cross-axis-mapping.axis-participates": "When checked, this axis participates in the mapping", diff --git a/src/fontra/client/lang/zh-CN.js b/src/fontra/client/lang/zh-CN.js index ca8571dbb..9ed381a1f 100644 --- a/src/fontra/client/lang/zh-CN.js +++ b/src/fontra/client/lang/zh-CN.js @@ -25,6 +25,7 @@ export const strings = { "action.delete-glyph": "删除字形", "action.delete-selection": "删除选中", "action.edit-anchor": "编辑锚点", + "action.edit-background-image": "Edit Background Image", "action.edit-guideline": "编辑参考线", "action.export-as.designspace": "Designspace + UFO (*.designspace)", "action.export-as.fontra": "Fontra (*.fontra)", @@ -94,6 +95,8 @@ export const strings = { "axes.undo.add": "添加参数轴 %0", "axes.undo.delete": "删除参数轴 %0", "axes.undo.edit": "编辑参数轴 %0", + "backgroundImage.labels.color": "Color", + "backgroundImage.labels.opacity": "Opacity", "canvas.clean-view-and-hand-tool": "预览与拖拽工具", "cross-axis-mapping.axis-participates": "选中后，该参数轴参与映射", "cross-axis-mapping.delete": "删除跨轴映射", diff --git a/src/fontra/views/editor/edit-tools-pointer.js b/src/fontra/views/editor/edit-tools-pointer.js index 5de89ec11..2f53e49b4 100644 --- a/src/fontra/views/editor/edit-tools-pointer.js +++ b/src/fontra/views/editor/edit-tools-pointer.js @@ -236,6 +236,7 @@ export class PointerTool extends BaseTool { guideline: guidelineIndices, // TODO: Font Guidelines // fontGuideline: fontGuidelineIndices, + backgroundImage: backgroundImageIndices, } = parseSelection(sceneController.selection); if (componentIndices?.length && !pointIndices?.length && !anchorIndices?.length) { componentIndices.sort(); @@ -257,6 +258,13 @@ export class PointerTool extends BaseTool { guidelineIndices.sort(); sceneController.doubleClickedGuidelineIndices = guidelineIndices; sceneController._dispatchEvent("doubleClickedGuidelines"); + } else if ( + backgroundImageIndices?.length && + !guidelineIndices?.length && + !pointIndices?.length && + !componentIndices?.length + ) { + sceneController._dispatchEvent("doubleClickedBackgroundImage"); } else if (pointIndices?.length && !sceneController.hoverPathHit) { await this.handlePointsDoubleClick(pointIndices); } else if (sceneController.hoverPathHit) { diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index 7921cf03b..188b201c2 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -30,12 +30,18 @@ import { getRemoteProxy } from "../core/remote.js"; import { SceneView } from "../core/scene-view.js"; import { parseClipboard } from "../core/server-utils.js"; import { isSuperset } from "../core/set-ops.js"; -import { labeledCheckbox, labeledTextInput } from "../core/ui-utils.js"; +import { + labeledCheckbox, + labeledColorInput, + labeledSliderInput, + labeledTextInput, +} from "../core/ui-utils.js"; import { commandKeyProperty, dumpURLFragment, enumerate, fetchJSON, + hexToRgba, hyphenatedToCamelCase, hyphenatedToLabel, isActiveElementTypeable, @@ -47,6 +53,7 @@ import { range, readFromClipboard, reversed, + rgbaToHex, scheduleCalls, writeToClipboard, } from "../core/utils.js"; @@ -215,6 +222,13 @@ export class EditorController { // this.doubleClickedFontGuidelinesCallback(event); // }); + this.sceneController.addEventListener( + "doubleClickedBackgroundImage", + async (event) => { + this.doubleClickedBackgroundImageCallback(event); + } + ); + this.sceneController.addEventListener("glyphEditCannotEditReadOnly", async () => { this.showDialogGlyphEditCannotEditReadOnly(); }); @@ -1526,6 +1540,38 @@ export class EditorController { }); } + async doubleClickedBackgroundImageCallback(event) { + const glyphController = await this.sceneModel.getSelectedStaticGlyphController(); + if (!glyphController.canEdit) { + this.sceneController._dispatchEvent("glyphEditLocationNotAtSource"); + return; + } + + const instance = glyphController.instance; + const backgroundImage = instance.backgroundImage; + if (!backgroundImage) { + return; + } + + const { backgroundImageColor: newBackgroundImageColor } = + await this.doEditBackgroundImageDialog(backgroundImage.color); + if (!newBackgroundImageColor) { + return; + } + await this.sceneController.editLayersAndRecordChanges((layerGlyphs) => { + for (const layerGlyph of Object.values(layerGlyphs)) { + const oldBackgroundImage = layerGlyph.backgroundImage; + if (!oldBackgroundImage) { + // skip: if no background image, create a new one + continue; + } + layerGlyph.backgroundImage.color = newBackgroundImageColor; + } + this.sceneController.selection = new Set([`backgroundImage/0`]); + return translate("action.edit-background-image"); + }); + } + initContextMenuItems() { this.basicContextMenuItems = []; this.basicContextMenuItems.push({ @@ -2752,6 +2798,86 @@ export class EditorController { return { contentElement, warningElement }; } + async doEditBackgroundImageDialog(backgroundImageColor) { + const titleDialog = translate("action.edit-background-image"); + const defaultButton = translate("dialog.edit"); + + const backgroundImageController = new ObservableController({ + backgroundImageColor: rgbaToHex([ + backgroundImageColor.red, + backgroundImageColor.green, + backgroundImageColor.blue, + ]), + backgroundImageOpacity: backgroundImageColor.alpha, + }); + + // even though we don't need warning for color, + // I keep it for consistency + if we want to add transformation later + const { contentElement, warningElement } = + this._backgroundImagePropertiesContentElement(backgroundImageController); + const dialog = await dialogSetup(titleDialog, null, [ + { title: translate("dialog.cancel"), isCancelButton: true }, + { title: defaultButton, isDefaultButton: true }, + ]); + + dialog.setContent(contentElement); + + if (!(await dialog.run())) { + // User cancelled + return {}; + } + + // The color picker only returns rgb, no alpha. This is why the following is only rgb, + // even though hexToRgba would be possible to return alpha as well. + // But we get the alpha from the slider via backgroundImageOpacity. + const rgb = hexToRgba(backgroundImageController.model.backgroundImageColor); + const newNackgroundImageColor = { + red: rgb[0], + green: rgb[1], + blue: rgb[2], + alpha: parseFloat(backgroundImageController.model.backgroundImageOpacity), + }; + + return { backgroundImageColor: newNackgroundImageColor }; + } + + _backgroundImagePropertiesContentElement(controller) { + const warningElement = html.div({ + id: "warning-text-guideline-name", + style: `grid-column: 1 / -1; min-height: 1.5em;`, + }); + const contentElement = html.div( + { + style: `overflow: hidden; + white-space: nowrap; + display: grid; + gap: 0.5em; + grid-template-columns: auto auto; + align-items: center; + height: 100%; + min-height: 0; + `, + }, + [ + ...labeledColorInput( + translate("backgroundImage.labels.color"), + controller, + "backgroundImageColor", + {} + ), + ...labeledSliderInput( + translate("backgroundImage.labels.opacity"), + controller, + "backgroundImageOpacity", + { min: 0, max: 1, step: 0.001 } + ), + html.br(), + // warningElement, + ] + ); + return { contentElement, warningElement }; + } + doSelectAllNone(selectNone) { const positionedGlyph = this.sceneModel.getSelectedPositionedGlyph(); From f0ddab9af67a18301d82d56a919b851127cb228c Mon Sep 17 00:00:00 2001 From: Olli Meier Date: Fri, 15 Nov 2024 08:22:51 +0100 Subject: [PATCH 2/5] Adding color change for background images (proposal) --- src/fontra/client/core/font-controller.js | 21 ++++++++++++++++++- .../editor/visualization-layer-definitions.js | 14 +++++++++++-- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/src/fontra/client/core/font-controller.js b/src/fontra/client/core/font-controller.js index ada7f5051..e1dbde8ce 100644 --- a/src/fontra/client/core/font-controller.js +++ b/src/fontra/client/core/font-controller.js @@ -168,7 +168,26 @@ export class FontController { const imagePromise = new Promise((resolve, reject) => { image.onload = (event) => resolve(image); }); - image.src = `data:image/${imageData.type};base64,${imageData.data}`; + + // The following code makes white pixels transparent, this is needed for applying color. + // Reference: https://stackoverflow.com/questions/30438524/algorithm-to-make-image-white-and-transparent + const idata = imageData.data; + const data32 = new Uint32Array(imageData.data.buffer); // use uint32 view for speed + const len = data32.length; + + for (const i = 0; i < len; i++) { + const px = data32[i]; // pixel + // is white? then knock it out + if (px === 0xffffffff) data32[i] = px = 0; + // extract alpha channel from a pixel + px = px & 0xff000000; // little-endian: ABGR + // any non-transparency? ie. alpha > 0 + if (px) { + data32[i] = px | 0xffffff; // set this pixel to white, keep alpha level + } + } + + image.src = `data:image/${imageData.type};base64,${idata}`; return await imagePromise; } diff --git a/src/fontra/views/editor/visualization-layer-definitions.js b/src/fontra/views/editor/visualization-layer-definitions.js index 26fe4130e..d348ab2f5 100644 --- a/src/fontra/views/editor/visualization-layer-definitions.js +++ b/src/fontra/views/editor/visualization-layer-definitions.js @@ -10,6 +10,7 @@ import { makeUPlusStringFromCodePoint, parseSelection, rgbaToCSS, + rgbaToHex, round, unionIndexSets, withSavedState, @@ -450,9 +451,18 @@ registerVisualizationLayerDefinition({ affine.dy ); if (backgroundImage.color) { - // TODO: solve colorizing with backgroundImage.color - // For now: apply alpha context.globalAlpha = backgroundImage.color.alpha; + const hexColor = rgbaToHex([ + backgroundImage.color.red, + backgroundImage.color.green, + backgroundImage.color.blue, + backgroundImage.color.alpha, + ]); + context.fillStyle = hexColor; + // The following code does do the color change, of the background is transparent. + // Reference: https://stackoverflow.com/questions/45706829/change-color-image-in-canvas + context.fillRect(0, 0, image.width, image.height); + context.globalCompositeOperation = "destination-in"; } context.drawImage(image, 0, 0, image.width, image.height); }); From ff15fcca503b2ed245e6c7213877547810bdfbc4 Mon Sep 17 00:00:00 2001 From: Olli Meier Date: Sat, 16 Nov 2024 06:04:35 +0100 Subject: [PATCH 3/5] background image demo: convert white pixels to transparent pixel --- src/fontra/client/core/font-controller.js | 21 +---------- .../editor/visualization-layer-definitions.js | 37 ++++++++++++++++++- 2 files changed, 37 insertions(+), 21 deletions(-) diff --git a/src/fontra/client/core/font-controller.js b/src/fontra/client/core/font-controller.js index e1dbde8ce..9be99f7bd 100644 --- a/src/fontra/client/core/font-controller.js +++ b/src/fontra/client/core/font-controller.js @@ -163,31 +163,12 @@ export class FontController { if (!imageData) { return null; } - const image = new Image(); const imagePromise = new Promise((resolve, reject) => { image.onload = (event) => resolve(image); }); - // The following code makes white pixels transparent, this is needed for applying color. - // Reference: https://stackoverflow.com/questions/30438524/algorithm-to-make-image-white-and-transparent - const idata = imageData.data; - const data32 = new Uint32Array(imageData.data.buffer); // use uint32 view for speed - const len = data32.length; - - for (const i = 0; i < len; i++) { - const px = data32[i]; // pixel - // is white? then knock it out - if (px === 0xffffffff) data32[i] = px = 0; - // extract alpha channel from a pixel - px = px & 0xff000000; // little-endian: ABGR - // any non-transparency? ie. alpha > 0 - if (px) { - data32[i] = px | 0xffffff; // set this pixel to white, keep alpha level - } - } - - image.src = `data:image/${imageData.type};base64,${idata}`; + image.src = `data:image/${imageData.type};base64,${imageData.data}`; return await imagePromise; } diff --git a/src/fontra/views/editor/visualization-layer-definitions.js b/src/fontra/views/editor/visualization-layer-definitions.js index d348ab2f5..c21b90603 100644 --- a/src/fontra/views/editor/visualization-layer-definitions.js +++ b/src/fontra/views/editor/visualization-layer-definitions.js @@ -436,11 +436,45 @@ registerVisualizationLayerDefinition({ if (!image) { return; } - const affine = decomposedToTransform(backgroundImage.transformation) .translate(0, image.height) .scale(1, -1); + // The following code cannot be the right solution, but it's a demo of the idea: + // Converte white pixels to transparent pixels. + // I am wonding if we should be doing this in the backend, or if we should be doing this in the frontend? + // Reference: https://stackoverflow.com/questions/6755314/canvas-imagedata-remove-white-pixels + function white2transparent(img) { + var c = document.createElement("canvas"); + + var w = img.width, + h = img.height; + + c.width = w; + c.height = h; + + var ctx = c.getContext("2d"); + + ctx.drawImage(img, 0, 0, w, h); + var imageData = ctx.getImageData(0, 0, w, h); + var pixel = imageData.data; + + var r = 0, + g = 1, + b = 2, + a = 3; + for (var p = 0; p < pixel.length; p += 4) { + if (pixel[p + r] == 255 && pixel[p + g] == 255 && pixel[p + b] == 255) { + // if white then change alpha to 0 + pixel[p + a] = 0; + } + } + + ctx.putImageData(imageData, 0, 0); + + return c.toDataURL("image/png"); + } + withSavedState(context, () => { context.transform( affine.xx, @@ -464,6 +498,7 @@ registerVisualizationLayerDefinition({ context.fillRect(0, 0, image.width, image.height); context.globalCompositeOperation = "destination-in"; } + image.src = white2transparent(image); context.drawImage(image, 0, 0, image.width, image.height); }); From bca21268afb5d5b5912d174783715d2356bda838 Mon Sep 17 00:00:00 2001 From: Olli Meier Date: Sat, 16 Nov 2024 06:07:00 +0100 Subject: [PATCH 4/5] Undo changes to font-controller.js --- src/fontra/client/core/font-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/client/core/font-controller.js b/src/fontra/client/core/font-controller.js index 9be99f7bd..ada7f5051 100644 --- a/src/fontra/client/core/font-controller.js +++ b/src/fontra/client/core/font-controller.js @@ -163,11 +163,11 @@ export class FontController { if (!imageData) { return null; } + const image = new Image(); const imagePromise = new Promise((resolve, reject) => { image.onload = (event) => resolve(image); }); - image.src = `data:image/${imageData.type};base64,${imageData.data}`; return await imagePromise; From d103bf14634cd9a6d83439d2e5702d3f7d7ac3f7 Mon Sep 17 00:00:00 2001 From: Olli Meier Date: Sat, 16 Nov 2024 06:37:25 +0100 Subject: [PATCH 5/5] Move white2transparent out of visualization-layer-definitions --- src/fontra/client/core/font-controller.js | 36 ++++++++++++++++++- .../editor/visualization-layer-definitions.js | 36 ------------------- 2 files changed, 35 insertions(+), 37 deletions(-) diff --git a/src/fontra/client/core/font-controller.js b/src/fontra/client/core/font-controller.js index ada7f5051..5c7e30ceb 100644 --- a/src/fontra/client/core/font-controller.js +++ b/src/fontra/client/core/font-controller.js @@ -137,7 +137,9 @@ export class FontController { const imagePromise = this._getBackgroundImage(imageIdentifier); cacheEntry = { imagePromise, image: null }; this._backgroundImageCache.put(imageIdentifier, cacheEntry); - imagePromise.then((image) => (cacheEntry.image = image)); + imagePromise.then( + (image) => ((image.src = white2transparent(image)), (cacheEntry.image = image)) + ); } return cacheEntry.imagePromise; } @@ -1053,3 +1055,35 @@ class InstanceRequestQueue { } } } + +// Reference: https://stackoverflow.com/questions/6755314/canvas-imagedata-remove-white-pixels +function white2transparent(img) { + var c = document.createElement("canvas"); + + var w = img.width, + h = img.height; + + c.width = w; + c.height = h; + + var ctx = c.getContext("2d"); + + ctx.drawImage(img, 0, 0, w, h); + var imageData = ctx.getImageData(0, 0, w, h); + var pixel = imageData.data; + + var r = 0, + g = 1, + b = 2, + a = 3; + for (var p = 0; p < pixel.length; p += 4) { + if (pixel[p + r] == 255 && pixel[p + g] == 255 && pixel[p + b] == 255) { + // if white then change alpha to 0 + pixel[p + a] = 0; + } + } + + ctx.putImageData(imageData, 0, 0); + + return c.toDataURL("image/png"); +} diff --git a/src/fontra/views/editor/visualization-layer-definitions.js b/src/fontra/views/editor/visualization-layer-definitions.js index c21b90603..1b9dd49f7 100644 --- a/src/fontra/views/editor/visualization-layer-definitions.js +++ b/src/fontra/views/editor/visualization-layer-definitions.js @@ -440,41 +440,6 @@ registerVisualizationLayerDefinition({ .translate(0, image.height) .scale(1, -1); - // The following code cannot be the right solution, but it's a demo of the idea: - // Converte white pixels to transparent pixels. - // I am wonding if we should be doing this in the backend, or if we should be doing this in the frontend? - // Reference: https://stackoverflow.com/questions/6755314/canvas-imagedata-remove-white-pixels - function white2transparent(img) { - var c = document.createElement("canvas"); - - var w = img.width, - h = img.height; - - c.width = w; - c.height = h; - - var ctx = c.getContext("2d"); - - ctx.drawImage(img, 0, 0, w, h); - var imageData = ctx.getImageData(0, 0, w, h); - var pixel = imageData.data; - - var r = 0, - g = 1, - b = 2, - a = 3; - for (var p = 0; p < pixel.length; p += 4) { - if (pixel[p + r] == 255 && pixel[p + g] == 255 && pixel[p + b] == 255) { - // if white then change alpha to 0 - pixel[p + a] = 0; - } - } - - ctx.putImageData(imageData, 0, 0); - - return c.toDataURL("image/png"); - } - withSavedState(context, () => { context.transform( affine.xx, @@ -498,7 +463,6 @@ registerVisualizationLayerDefinition({ context.fillRect(0, 0, image.width, image.height); context.globalCompositeOperation = "destination-in"; } - image.src = white2transparent(image); context.drawImage(image, 0, 0, image.width, image.height); });