From 7fe0aeaaeadfd49fe3cee3a81bd571985f308295 Mon Sep 17 00:00:00 2001 From: k1w1 Date: Thu, 29 Dec 2022 15:30:59 -0800 Subject: [PATCH] Force all images to be inline bitmaps. Otherwise the SVGs we generate can't be opened by editing tools like Figma. --- context.js | 17 ++++++++--------- package.json | 2 +- test/index.js | 2 ++ test/tests/image.js | 18 ++++++++++++++++++ 4 files changed, 29 insertions(+), 10 deletions(-) create mode 100644 test/tests/image.js diff --git a/context.js b/context.js index 92f91ea..7215ac2 100644 --- a/context.js +++ b/context.js @@ -1128,15 +1128,14 @@ export default (function () { svgImage.setAttribute("height", dh); svgImage.setAttribute("preserveAspectRatio", "none"); - if (sx || sy || sw !== image.width || sh !== image.height) { - //crop the image using a temporary canvas - canvas = this.__document.createElement("canvas"); - canvas.width = dw; - canvas.height = dh; - context = canvas.getContext("2d"); - context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh); - image = canvas; - } + // Crop the image using a temporary canvas and convert to a bitmap + canvas = this.__document.createElement("canvas"); + canvas.width = dw; + canvas.height = dh; + context = canvas.getContext("2d"); + context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh); + image = canvas; + this.__applyTransformation(svgImage, matrix); svgImage.setAttributeNS( "http://www.w3.org/1999/xlink", diff --git a/package.json b/package.json index 0526c8f..7d44f05 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@aha-app/svgcanvas", - "version": "2.5.0-a11", + "version": "2.5.0-a12", "description": "svgcanvas", "main": "dist/svgcanvas.js", "scripts": { diff --git a/test/index.js b/test/index.js index b04704d..8e63def 100644 --- a/test/index.js +++ b/test/index.js @@ -9,6 +9,7 @@ import ellipse2 from "./tests/ellipse2"; import fillstyle from "./tests/fillstyle"; import globalAlpha from "./tests/globalalpha"; import gradient from "./tests/gradient"; +import image from "./tests/image"; import linecap from "./tests/linecap"; import linewidth from "./tests/linewidth"; import scaledLine from "./tests/scaledLine"; @@ -36,6 +37,7 @@ const tests = [ fillstyle, globalAlpha, gradient, + image, linecap, linewidth, scaledLine, diff --git a/test/tests/image.js b/test/tests/image.js new file mode 100644 index 0000000..9276804 --- /dev/null +++ b/test/tests/image.js @@ -0,0 +1,18 @@ +export default function image(ctx) { + // Create an image based on a URL + var img = new Image(); + img.src = + "https://dl.dropboxusercontent.com/s/m76annmw0nzz5fx/Unknown.jpg?dl=1"; + img.crossOrigin = "anonymous"; + img.onload = function () { + ctx.drawImage(img, 20, 20, 30, 30); + }; + + // Create an image based on a foreignObject block. + var img2 = new Image(); + img2.src = + "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22164%22%20height%3D%2260%22%20data-reactroot%3D%22%22%3E%3Cstyle%3E%0A%20%20%20%20%20%20%3Aroot%20%7B%0A%20%20%20%20%20%20%20%20--theme-link-text%3A%20rgb(0%2C%20115%2C%20207)%3B%0A%20%20%20%20%20%20%20%20--theme-primary-border%3A%20rgb(205%2C%20205%2C%20205)%3B%0A%20%20%20%20%20%20%20%20--theme-light-border%3A%20rgb(241%2C%20241%2C%20241)%3B%0A%20%20%20%20%20%20%20%20--aha-yellow-400%3A%20rgb(255%2C%20228%2C%20142)%3B%0A%20%20%20%20%20%20%20%20--aha-gray-700%3A%20rgb(150%2C%20153%2C%20153)%3B%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20--aha-orange-600%3A%20rgb(249%2C%20147%2C%2025)%3B%0A%20%20%20%20%20%20%20%20--aha-orange-800%3A%20rgb(199%2C%20109%2C%200)%3B%0A%20%20%20%20%20%20%20%20--aha-red-600%3A%20rgb(235%2C%20121%2C%2087)%3B%0A%20%20%20%20%20%20%20%20--aha-blue-500%3A%20rgb(0%2C%20115%2C%20207)%3B%0A%20%20%20%20%20%20%20%20--theme-green-text%3A%20rgb(79%2C%20143%2C%2014)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%3C!--%20--%3E._editorContainer_19k9u_1%20%7B%0A%20%20display%3A%20block%3B%0A%7D%0A%0A._editor_19k9u_1%20%7B%0A%20%20display%3A%20flex%3B%0A%20%20flex-direction%3A%20column%3B%0A%20%20width%3A%20min-content%3B%0A%20%20overflow%3A%20hidden%3B%0A%20%20white-space%3A%20pre-wrap%3B%0A%20%20overflow-wrap%3A%20break-word%3B%0A%0A%20%20%2F*%20Default%20font%20*%2F%0A%20%20font-family%3A%20sans-serif%3B%0A%20%20font-size%3A%2014px%3B%0A%20%20line-height%3A%201.4%3B%0A%7D%0A._editor_19k9u_1._autoGrow_19k9u_18%2C%0A._editor_19k9u_1._autoGrow_19k9u_18%20.aha-editor-body%20%7B%0A%20%20white-space%3A%20pre%20!important%3B%0A%7D%0A._editor_19k9u_1._editing_19k9u_22%20%7B%0A%20%20overflow%3A%20visible%3B%0A%7D%0A%0A._editor_19k9u_1%20._content_19k9u_26%20%7B%0A%20%20margin%3A%20auto%3B%0A%20%20width%3A%20100%25%3B%0A%7D%0A%0A._editor_19k9u_1%20.aha-editor__pre-container%20%7B%0A%20%20position%3A%20relative%3B%0A%7D%0A%0A._editor_19k9u_1%20.aha-editor-context-toolbar-btn%20%7B%0A%20%20position%3A%20absolute%3B%0A%20%20right%3A%20-5px%3B%0A%20%20top%3A%203px%3B%0A%20%20z-index%3A%209999%3B%0A%20%20height%3A%2016px%3B%0A%7D%0A%0A._editor_19k9u_1%0A%20%20.aha-editor-context-toolbar-btn%3Ahover%0A%20%20.aha-editor-toolbar-btn%20%7B%0A%20%20background-color%3A%20var(--theme-editor-button-hovered)%20!important%3B%0A%20%20color%3A%20var(--aha-gray-900)%20!important%3B%0A%20%20cursor%3A%20pointer%3B%0A%7D%0A%0A._editor_19k9u_1%20.aha-editor-context-toolbar-btn%20button%20%7B%0A%20%20border%3A%20none%3B%0A%20%20border-radius%3A%204px%3B%0A%20%20padding%3A%200%3B%0A%20%20background-color%3A%20var(--theme-tertiary-background)%3B%0A%7D%0A%0A._editor_19k9u_1%20.aha-editor-context-toolbar-btn%20i%20%7B%0A%20%20margin-right%3A%205px%3B%0A%7D%0A%0A%2F*%0A%20*%20Text%20styles.%0A%20*%2F%0A._editor_19k9u_1%20p%2C%0A._editor_19k9u_1%20pre%20%7B%0A%20%20margin%3A%200%3B%0A%7D%0A%0A._editor_19k9u_1%20.align-left%20%7B%0A%20%20text-align%3A%20left%3B%0A%7D%0A%0A._editor_19k9u_1%20.align-center%20%7B%0A%20%20text-align%3A%20center%3B%0A%7D%0A%0A._editor_19k9u_1%20.align-right%20%7B%0A%20%20text-align%3A%20right%3B%0A%7D%0A%0A._editor_19k9u_1%20.align-justify%20%7B%0A%20%20text-align%3A%20justify%3B%0A%7D%0A%0A._editor_19k9u_1%20.inline-highlight%20%7B%0A%20%20background-color%3A%20var(--aha-yellow-400)%3B%0A%7D%0A%0A._editor_19k9u_1%20a%20%7B%0A%20%20word-wrap%3A%20break-word%3B%0A%7D%0A%0A._editor_19k9u_1%20code%20%7B%0A%20%20font-size%3A%20inherit%3B%0A%7D%0A%0A._editor_19k9u_1%20ul%2C%0A._editor_19k9u_1%20ol%20%7B%0A%20%20padding%3A%200%3B%0A%20%20list-style-position%3A%20inside%3B%0A%7D%0A._editor_19k9u_1%20ul%20%7B%0A%20%20margin%3A%200%200%200%201em%3B%0A%7D%0A._editor_19k9u_1%20ol%20%7B%0A%20%20margin%3A%200%200%200%202em%3B%20%2F*%20More%20space%20for%202%20digit%20numbers%20*%2F%0A%7D%0A._editor_19k9u_1%20ul%20p%2C%0A._editor_19k9u_1%20ol%20p%20%7B%0A%20%20text-align%3A%20left%20!important%3B%0A%7D%0A%0A._editor_19k9u_1%20ul%20%7B%0A%20%20list-style-type%3A%20disc%3B%0A%7D%0A%0A._editor_19k9u_1%20ul.checklist%20%7B%0A%20%20list-style-type%3A%20none%3B%0A%7D%0A%0A._editor_19k9u_1%20li.checklist-item--checked%2C%0A._editor_19k9u_1%20li.checklist-item--unchecked%20%7B%0A%20%20list-style-type%3A%20none%3B%0A%7D%0A%0A._editor_19k9u_1%20li%20%7B%0A%20%20box-sizing%3A%20border-box%3B%0A%20%20line-height%3A%201.4%3B%20%2F*%20Must%20be%20same%20as%20%26lt%3Bp%26gt%3B%20line-height.%20*%2F%0A%20%20list-style-position%3A%20outside%3B%0A%20%20font-style%3A%20normal%3B%0A%20%20font-weight%3A%20normal%3B%0A%20%20padding%3A%200%3B%0A%20%20margin%3A%200%3B%0A%7D%0A%0A._editor_19k9u_1%20li.checkbox%20%7B%0A%20%20padding-left%3A%200%3B%0A%20%20min-height%3A%20auto%3B%0A%7D%0A%0A._editor_19k9u_1%20li.checkbox%20input%5Btype%3D%26%23x27%3Bcheckbox%26%23x27%3B%5D%20%7B%0A%20%20margin%3A%203px%200%200%20-18px%3B%0A%20%20position%3A%20absolute%3B%0A%20%20margin-top%3A%200%3B%0A%20%20margin-left%3A%20-15px%3B%0A%7D%0A%0A._editor_19k9u_1%20li%20.checklist-item__indicator%20%7B%0A%20%20margin%3A%200%3B%0A%20%20position%3A%20absolute%3B%0A%20%20margin-left%3A%20-1.5ch%3B%0A%7D%0A%0A._editor_19k9u_1%20code%20%7B%0A%20%20white-space%3A%20inherit%3B%0A%7D%0A%0A._editor_19k9u_1%20table%20%7B%0A%20%20width%3A%20100%25%3B%0A%20%20word-wrap%3A%20break-word%3B%0A%20%20table-layout%3A%20fixed%3B%0A%7D%0A%0A._editor_19k9u_1%20td%20%7B%0A%20%20position%3A%20relative%3B%0A%20%20border%3A%201px%20solid%20var(--theme-primary-border)%3B%0A%20%20padding%3A%208px%3B%0A%20%20vertical-align%3A%20top%3B%0A%7D%0A%0A._editor_19k9u_1%20blockquote%20%7B%0A%20%20padding%3A%203px%200%203px%2010px%3B%0A%20%20border-left%3A%204px%20solid%20var(--theme-light-border)%3B%0A%7D%0A%0A._editor_19k9u_1%20a%20%7B%0A%20%20color%3A%20var(--theme-link-text)%3B%0A%20%20text-decoration%3A%20underline%3B%0A%7D%0A%0A._editor_19k9u_1%20code%20%7B%0A%20%20padding%3A%202px%204px%3B%0A%20%20color%3A%20%23d14%3B%0A%20%20background-color%3A%20%23f7f7f9%3B%0A%20%20border%3A%201px%20solid%20%23e1e1e8%3B%0A%20%20border-radius%3A%203px%3B%0A%7D%0A%0A._editor_19k9u_1%20pre%20%7B%0A%20%20padding%3A%202px%204px%3B%0A%20%20margin%3A%200%3B%0A%20%20display%3A%20block%3B%0A%20%20background-color%3A%20%23f7f7f9%3B%0A%20%20border%3A%201px%20solid%20%23e1e1e8%3B%0A%20%20border-radius%3A%203px%3B%0A%20%20word-break%3A%20break-all%3B%0A%20%20white-space%3A%20break-spaces%3B%0A%7D%0A._editor_19k9u_1%20pre%20code%20%7B%0A%20%20padding%3A%200%3B%0A%20%20color%3A%20inherit%3B%0A%20%20background-color%3A%20transparent%3B%0A%20%20border%3A%200%3B%0A%7D%0A%0A%2F*%20prism.js%20styles%20*%2F%0A._editor_19k9u_1%20.token.comment%2C%0A._editor_19k9u_1%20.token.prolog%2C%0A._editor_19k9u_1%20.token.doctype%2C%0A._editor_19k9u_1%20.token.cdata%20%7B%0A%20%20color%3A%20slategray%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.punctuation%20%7B%0A%20%20color%3A%20%23999%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.namespace%20%7B%0A%20%20opacity%3A%200.7%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.property%2C%0A._editor_19k9u_1%20.token.tag%2C%0A._editor_19k9u_1%20token.boolean%2C%0A._editor_19k9u_1%20.token.number%2C%0A._editor_19k9u_1%20.token.constant%2C%0A._editor_19k9u_1%20.token.symbol%2C%0A._editor_19k9u_1%20.token.deleted%20%7B%0A%20%20color%3A%20%23905%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.selector%2C%0A._editor_19k9u_1%20.token.attr-name%2C%0A._editor_19k9u_1%20.token.string%2C%0A._editor_19k9u_1%20.token.char%2C%0A._editor_19k9u_1%20.token.builtin%2C%0A._editor_19k9u_1%20.token.inserted%20%7B%0A%20%20color%3A%20var(--theme-green-text)%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.operator%2C%0A._editor_19k9u_1%20.token.entity%2C%0A._editor_19k9u_1%20.token.url%2C%0A._editor_19k9u_1%20.language-css%20.token.string%2C%0A._editor_19k9u_1%20.style%20.token.string%20%7B%0A%20%20color%3A%20var(--aha-orange-800)%3B%0A%20%20%2F*%20This%20background%20color%20was%20intended%20by%20the%20author%20of%20this%20theme.%20*%2F%0A%20%20background%3A%20hsla(0%2C%200%25%2C%20100%25%2C%200.5)%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.atrule%2C%0A._editor_19k9u_1%20.token.attr-value%2C%0A._editor_19k9u_1%20.token.keyword%20%7B%0A%20%20color%3A%20var(--aha-blue-500)%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.function%2C%0A._editor_19k9u_1%20.token.class-name%20%7B%0A%20%20color%3A%20var(--aha-red-600)%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.regex%2C%0A._editor_19k9u_1%20.token.important%2C%0A._editor_19k9u_1%20.token.variable%20%7B%0A%20%20color%3A%20var(--aha-orange-600)%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.important%2C%0A._editor_19k9u_1%20.token.bold%20%7B%0A%20%20font-weight%3A%20bold%3B%0A%7D%0A._editor_19k9u_1%20.token.italic%20%7B%0A%20%20font-style%3A%20italic%3B%0A%7D%0A%0A._editor_19k9u_1%20.frameText%20%7B%0A%20%20color%3A%20var(--aha-gray-700)%3B%0A%7D%0A%3C%2Fstyle%3E%3CforeignObject%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22min-height%3A30px%3Bwidth%3A82px%3Bfont-size%3A14px%3Bbox-sizing%3Aborder-box%3Bpadding%3A5px%205px%205px%205px%3Btransform-origin%3Atop%20left%3Btransform%3Ascale(2)%22%20class%3D%22_editor_19k9u_1%20_autoGrow_19k9u_18%22%3E%3Cdiv%20class%3D%22_content_19k9u_26%22%3E%3Cp%20style%3D%22text-align%3Acenter%22%3EHello%20World%3C%2Fp%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E"; + img2.onload = function () { + ctx.drawImage(img2, 20, 100, 60, 30); + }; +}