Add SVG image suport (#2487)
* Add SVG blip extentions * SVG Image feature now works * Add and simplify tests * Fix falsey issue with file Write tests 100% Coverage
This commit is contained in:
Dolan
GitHub
@ -21,6 +21,7 @@ const doc = new Document({
|
||||
new Paragraph({
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "jpg",
|
||||
data: fs.readFileSync("./demo/images/image1.jpeg"),
|
||||
transformation: {
|
||||
width: 100,
|
||||
@ -37,6 +38,7 @@ const doc = new Document({
|
||||
new Paragraph({
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "png",
|
||||
data: fs.readFileSync("./demo/images/dog.png").toString("base64"),
|
||||
transformation: {
|
||||
width: 100,
|
||||
@ -53,6 +55,7 @@ const doc = new Document({
|
||||
new Paragraph({
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "jpg",
|
||||
data: fs.readFileSync("./demo/images/cat.jpg"),
|
||||
transformation: {
|
||||
width: 100,
|
||||
@ -73,6 +76,7 @@ const doc = new Document({
|
||||
new Paragraph({
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "bmp",
|
||||
data: fs.readFileSync("./demo/images/parrots.bmp"),
|
||||
transformation: {
|
||||
width: 150,
|
||||
@ -88,6 +92,7 @@ const doc = new Document({
|
||||
new Paragraph({
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "gif",
|
||||
data: fs.readFileSync("./demo/images/pizza.gif"),
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -103,6 +108,7 @@ const doc = new Document({
|
||||
new Paragraph({
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "gif",
|
||||
data: fs.readFileSync("./demo/images/pizza.gif"),
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -124,6 +130,7 @@ const doc = new Document({
|
||||
new Paragraph({
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "jpg",
|
||||
data: fs.readFileSync("./demo/images/cat.jpg"),
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -143,6 +150,22 @@ const doc = new Document({
|
||||
}),
|
||||
],
|
||||
}),
|
||||
new Paragraph({
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "svg",
|
||||
data: fs.readFileSync("./demo/images/linux-svg.svg"),
|
||||
transformation: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
},
|
||||
fallback: {
|
||||
type: "png",
|
||||
data: fs.readFileSync("./demo/images/linux-png.png"),
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
BIN
demo/images/linux-png.png
Normal file
BIN
demo/images/linux-png.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
183
demo/images/linux-svg.svg
Normal file
183
demo/images/linux-svg.svg
Normal file
@ -0,0 +1,183 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="500pt" height="600pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/">
|
||||
|
||||
<defs>
|
||||
|
||||
<linearGradient id="linearGradient172">
|
||||
|
||||
<stop style="stop-color:#3f2600;stop-opacity:0.6;" offset="0" id="stop173" />
|
||||
|
||||
<stop style="stop-color:#3f2600;stop-opacity:0;" offset="1" id="stop174" />
|
||||
</linearGradient>
|
||||
<linearGradient id="linearGradient167">
|
||||
|
||||
<stop style="stop-color:#ffffff;stop-opacity:0.65;" offset="0" id="stop168" />
|
||||
|
||||
<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop169" />
|
||||
</linearGradient>
|
||||
<linearGradient id="linearGradient162">
|
||||
|
||||
<stop style="stop-color:#ffa63f;stop-opacity:1;" offset="0" id="stop163" />
|
||||
|
||||
<stop style="stop-color:#ffff00;stop-opacity:1;" offset="1" id="stop164" />
|
||||
</linearGradient>
|
||||
<linearGradient id="linearGradient153">
|
||||
|
||||
<stop style="stop-color:#ffeed7;stop-opacity:1;" offset="0" id="stop154" />
|
||||
|
||||
<stop style="stop-color:#bdbfc2;stop-opacity:1;" offset="1" id="stop155" /></linearGradient>
|
||||
|
||||
<linearGradient id="linearGradient138">
|
||||
|
||||
<stop style="stop-color:#ffffff;stop-opacity:0.8;" offset="0" id="stop139" />
|
||||
|
||||
<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop140" />
|
||||
</linearGradient>
|
||||
<linearGradient xlink:href="#linearGradient138" id="linearGradient141" x1="0.47424799" y1="0.020191999" x2="0.417539" y2="0.90125799" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient142" x1="0.55880702" y1="0.031192999" x2="0.553922" y2="0.94531101" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient143" x1="0.46557701" y1="0.028819799" x2="0.41365999" y2="0.93366498" gradientUnits="objectBoundingBox"/>
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient144" x1="0.70346397" y1="0.059404202" x2="0.64553201" y2="0.94063401" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient145" x1="0.46741399" y1="-0.036155298" x2="0.86741799" y2="0.75857902" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient146" x1="0.57152498" y1="0.023441499" x2="0.57143003" y2="0.71875" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient147" x1="0.5" y1="0.0234362" x2="0.5" y2="0.8125" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient148" x1="0.50799799" y1="0.37435901" x2="0.51599997" y2="0.92820501" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient138" id="linearGradient149" x1="0.5" y1="0.131707" x2="0.50400001" y2="0.94634098" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient150" x1="-0.30509499" y1="0.099496603" x2="0.156323" y2="0.94191301" gradientUnits="objectBoundingBox" gradientTransform="matrix(-0.928523,0.283938,0.435332,0.943857,-1.91327e-7,5.49908e-8)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient151" x1="0.433979" y1="0.022184599" x2="0.487055" y2="1.02569" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient153" id="linearGradient152" x1="0.5" y1="0.89842999" x2="0.5" y2="0.40625" gradientUnits="objectBoundingBox" spreadMethod="reflect" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient153" id="linearGradient156" x1="0.43568701" y1="0.98882002" x2="0.453989" y2="0.23093501" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient153" id="linearGradient157" x1="0.49180499" y1="1.15284" x2="0.49482101" y2="0.41252401" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient153" id="linearGradient158" x1="0.51730198" y1="0.85418499" x2="0.49843901" y2="0.136172" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient153" id="linearGradient159" x1="0.46201" y1="0.87917101" x2="0.49215299" y2="0.096282303" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient162" id="linearGradient161" x1="0.50086302" y1="0.34872901" x2="0.41209599" y2="0.98558098" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient162" id="linearGradient165" x1="0.60399801" y1="0.51020199" x2="0.46399999" y2="0.98367399" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient162" id="linearGradient166" x1="0.50000501" y1="0.191616" x2="0.50800002" y2="0.97005898" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<radialGradient xlink:href="#linearGradient172" id="radialGradient171" cx="0.5" cy="0.5" fx="0.5" fy="0.5" r="0.5" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<radialGradient xlink:href="#linearGradient172" id="radialGradient176" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient153" id="linearGradient178" x1="0.94027299" y1="1.2934099" x2="0.19452" y2="-0.675295" gradientUnits="objectBoundingBox" />
|
||||
|
||||
<radialGradient xlink:href="#linearGradient172" id="radialGradient1399" gradientTransform="scale(1.045233,0.956725)" cx="446.77762" cy="1219.4125" fx="446.77762" fy="1219.4125" r="195.07191" gradientUnits="userSpaceOnUse" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient153" id="linearGradient1401" gradientUnits="userSpaceOnUse" x1="400.57785" y1="369.53015" x2="400.84448" y2="304.07886" gradientTransform="scale(0.575262,1.738339)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient138" id="linearGradient1403" gradientUnits="userSpaceOnUse" x1="303.01761" y1="237.93179" x2="297.0856" y2="330.09561" gradientTransform="scale(1.116071,0.896001)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient153" id="linearGradient1405" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.816497,1.224744)" x1="378.93771" y1="278.60202" x2="380.27319" y2="243.91606" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient153" id="linearGradient1407" gradientUnits="userSpaceOnUse" x1="381.38742" y1="277.495" x2="380.5517" y2="245.68338" gradientTransform="scale(0.816497,1.224744)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient1409" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.816497,1.224744)" x1="379.09573" y1="240.92712" x2="376.79556" y2="281.01636" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient1411" gradientUnits="userSpaceOnUse" x1="389.63535" y1="242.28218" x2="387.06866" y2="281.32513" gradientTransform="scale(0.816497,1.224744)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient153" id="linearGradient1413" gradientUnits="userSpaceOnUse" spreadMethod="reflect" x1="437.57941" y1="528.87177" x2="437.57941" y2="394.10361" gradientTransform="scale(0.812855,1.230232)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient153" id="linearGradient1415" gradientUnits="userSpaceOnUse" x1="375.17325" y1="419.78485" x2="377.48541" y2="324.03815" gradientTransform="scale(0.649784,1.538974)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient138" id="linearGradient1417" gradientUnits="userSpaceOnUse" x1="320.75104" y1="498.17776" x2="321.32224" y2="614.50439" gradientTransform="scale(1.074798,0.930408)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient1419" gradientUnits="userSpaceOnUse" x1="322.48257" y1="435.26761" x2="323.2514" y2="488.48251" gradientTransform="scale(1.077001,0.928504)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient1421" gradientUnits="userSpaceOnUse" x1="411.2215" y1="242.94365" x2="411.2215" y2="331.44858" gradientTransform="scale(0.571707,1.749147)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient1423" gradientUnits="userSpaceOnUse" x1="867.34546" y1="234.73897" x2="867.33453" y2="314.83911" gradientTransform="scale(0.572667,1.746214)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient162" id="linearGradient1425" gradientUnits="userSpaceOnUse" x1="236.25362" y1="657.11133" x2="212.5099" y2="737.41229" gradientTransform="scale(1.011514,0.988617)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient153" id="linearGradient1427" gradientUnits="userSpaceOnUse" x1="381.56607" y1="655.73102" x2="279.64313" y2="386.66583" gradientTransform="scale(1.065499,0.938527)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient162" id="linearGradient1429" gradientUnits="userSpaceOnUse" x1="218.11714" y1="630.30475" x2="203.12654" y2="737.8537" gradientTransform="scale(1.009851,0.990245)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient1431" gradientUnits="userSpaceOnUse" gradientTransform="scale(1.007724,0.992335)" x1="117.88966" y1="587.23602" x2="182.24524" y2="704.73077" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient1433" gradientUnits="userSpaceOnUse" x1="223.10072" y1="570.41809" x2="230.53499" y2="710.97723" gradientTransform="scale(0.999504,1.000496)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient1435" gradientUnits="userSpaceOnUse" x1="316.93988" y1="474.01779" x2="371.60889" y2="582.63507" gradientTransform="scale(1.065499,0.938527)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient162" id="linearGradient1437" gradientUnits="userSpaceOnUse" x1="284.68652" y1="410.46326" x2="285.45923" y2="485.69934" gradientTransform="scale(1.218684,0.820557)" />
|
||||
|
||||
<linearGradient xlink:href="#linearGradient167" id="linearGradient1439" gradientUnits="userSpaceOnUse" x1="288.82358" y1="398.85422" x2="288.37628" y2="482.55939" gradientTransform="scale(1.221941,0.81837)" />
|
||||
</defs>
|
||||
|
||||
<g id="g1369" transform="translate(-310.7524,-64.25268)">
|
||||
|
||||
<path transform="matrix(1.4177,0,0,0.414745,-38.7944,222.194)" d="M 670.88202 1166.6423 A 203.89551 186.63016 0 1 1 263.091,1166.6423 A 203.89551 186.63016 0 1 1 670.88202 1166.6423 z" id="path175" style="fill:url(#radialGradient1399);stroke:none;stroke-width:1pt;stroke-linecap:butt;stroke-linejoin:miter" />
|
||||
|
||||
<path transform="matrix(1.25,0,0,1.25,185.454,-167.505)" id="path106" d="M 223.627,632.24 C 201.239,600.017 196.873,495.256 249.114,430.81 C 275,399.892 281.604,378.345 283.645,349.417 C 285.034,316.438 260.32,217.975 353.528,210.473 C 447.934,202.941 442.864,296.133 442.321,345.448 C 441.87,387.088 472.895,410.689 494.117,443.143 C 533.396,502.773 530.074,605.443 486.718,661.015 C 431.801,730.583 384.765,700.413 353.528,702.945 C 295.035,706.147 293.101,737.336 223.627,632.24 z " style="fill:#000000;stroke:none;stroke-width:1.25;" />
|
||||
|
||||
<path transform="matrix(-1.67739,-2.24516e-2,-2.11236e-2,1.4709,1173.58,-293.017)" id="path113" d="M 246.571,470.864 C 234.332,483.36 202.175,539.956 251.44,576.224 C 268.809,588.857 235.063,635.719 219.435,612.532 C 191.865,570.914 210.604,505.591 227.75,482.344 C 239.402,465.857 256.98,459.668 246.571,470.864 z " style="fill:url(#linearGradient1401);stroke:none;stroke-width:0.99464899;" />
|
||||
|
||||
<path transform="matrix(-1.67755,0,0,1.52374,1174.62,-318.082)" id="path111" d="M 256.513,459.837 C 236.598,477.554 200.337,539.928 253.225,580.443 C 270.595,593.075 237.832,632.906 219.435,612.532 C 155.472,541.712 221.104,460.278 243.697,432.282 C 263.889,407.935 281.775,438.034 256.513,459.837 z " style="fill:#000000;stroke:#000000;stroke-width:0.97729802;" />
|
||||
|
||||
<path transform="matrix(1.26626,-7.13667e-2,-4.59795e-2,1.19574,202.143,-125.761)" d="M 399.56879 258.15753 A 58.37323 46.863022 0 1 1 282.82233,258.15753 A 58.37323 46.863022 0 1 1 399.56879 258.15753 z" id="path114" style="fill:url(#linearGradient1403);stroke:none;stroke-width:1.26498997;" />
|
||||
|
||||
<path transform="matrix(1.30445,-7.55326e-2,7.71251e-2,1.34257,144.757,-177.617)" d="M 328.86324 320.64151 A 18.087479 27.131195 0 1 1 292.68828,320.64151 A 18.087479 27.131195 0 1 1 328.86324 320.64151 z" id="path115" style="fill:url(#linearGradient1405);stroke:none;stroke-width:1.17873001;" />
|
||||
|
||||
<path transform="matrix(-1.81082,4.95107e-2,3.17324e-2,1.55333,1207.46,-284.777)" d="M 328.86324 320.64151 A 18.087479 27.131195 0 1 1 292.68828,320.64151 A 18.087479 27.131195 0 1 1 328.86324 320.64151 z" id="path116" style="fill:url(#linearGradient1407);stroke:none;stroke-width:0.93138498;" />
|
||||
|
||||
<path transform="matrix(-0.823196,-1.76123e-3,-1.82321e-2,0.852662,913.674,-37.9902)" d="M 328.86324 320.64151 A 18.087479 27.131195 0 1 1 292.68828,320.64151 A 18.087479 27.131195 0 1 1 328.86324 320.64151 z" id="path117" style="fill:#000000;stroke:none;stroke-width:1.86495996;" />
|
||||
|
||||
<path transform="matrix(0.59438,-7.22959e-2,6.88176e-2,0.705838,367.448,32.4186)" d="M 328.86324 320.64151 A 18.087479 27.131195 0 1 1 292.68828,320.64151 A 18.087479 27.131195 0 1 1 328.86324 320.64151 z" id="path118" style="fill:#000000;stroke:none;stroke-width:2.39814997;" />
|
||||
|
||||
<path transform="matrix(-0.480323,-3.6454e-2,-4.67935e-2,0.475606,813.496,87.0124)" d="M 328.86324 320.64151 A 18.087479 27.131195 0 1 1 292.68828,320.64151 A 18.087479 27.131195 0 1 1 328.86324 320.64151 z" id="path121" style="fill:url(#linearGradient1409);stroke:none;stroke-width:3.1916101;" />
|
||||
|
||||
<path transform="matrix(0.35691,-4.08211e-2,4.13232e-2,0.398544,449.334,114.991)" d="M 328.86324 320.64151 A 18.087479 27.131195 0 1 1 292.68828,320.64151 A 18.087479 27.131195 0 1 1 328.86324 320.64151 z" id="path122" style="fill:url(#linearGradient1411);stroke:none;stroke-width:4.12025976;" />
|
||||
|
||||
<path transform="matrix(1.25,0,0,1.25,185.454,-168.23)" id="path128" d="M 258.702,495.425 C 271.538,466.322 298.816,415.199 299.397,375.667 C 299.397,344.225 393.576,336.716 401.134,368.109 C 408.692,399.502 427.875,446.592 440.084,469.265 C 452.292,491.937 487.893,563.96 449.968,626.811 C 415.811,682.455 312.243,726.477 256.958,619.254 C 238.355,582.047 241.673,535.939 258.702,495.425 z " style="fill:url(#linearGradient1413);stroke:none;stroke-width:1.25;" />
|
||||
|
||||
<path transform="matrix(1.38936,-0.111074,0.102211,1.30214,108.413,-165.938)" id="path112" d="M 242.905,473.815 C 231.642,492.782 207.405,543.124 255.042,575.862 C 306.353,610.682 301.515,672.924 239.435,637.817 C 182.658,606.028 216.59,500.039 234.925,475.551 C 247.032,458.337 264.822,437.52 242.905,473.815 z " style="fill:url(#linearGradient1415);stroke:none;stroke-width:1.15804005;" />
|
||||
|
||||
<path transform="matrix(1.25,0,0,1.25,185.454,-167.505)" id="path109" d="M 256.513,449.72 C 239.048,478.228 197.136,545.533 253.225,580.443 C 328.794,626.798 307.398,673.154 238.426,631.417 C 141.317,573.153 226.601,455.801 265.557,411.079 C 310.001,360.879 274.111,420.166 256.513,449.72 z " style="fill:#000000;stroke:#000000;stroke-width:1.25;" />
|
||||
|
||||
<path id="path125" d="M 421.481,504.727 C 421.481,537.139 392.209,579.243 341.953,578.865 C 290.125,579.32 268.004,537.139 268.004,504.727 C 268.004,472.315 302.383,446.01 344.743,446.01 C 387.102,446.01 421.481,472.315 421.481,504.727 z " style="font-size:12px;fill:url(#linearGradient1417);stroke:none;stroke-width:1.23705006;stroke-dasharray:none" transform="matrix(1.30209,0,0,1.22525,170.042,-153.557)" />
|
||||
|
||||
<path id="path127" d="M 398.227,412.292 C 397.615,450.864 375.047,459.963 346.487,459.963 C 317.926,459.963 297.195,454.269 294.746,412.292 C 294.746,385.978 317.926,370.75 346.487,370.75 C 375.047,370.75 398.227,385.978 398.227,412.292 z " style="font-size:12px;fill:url(#linearGradient1419);stroke:none;stroke-width:1.38846004;stroke-dasharray:none" transform="matrix(1.1868,0,0,1.06708,210.623,-100.078)" />
|
||||
|
||||
<path transform="matrix(1.25,0,0,1.25,185.454,-167.505)" id="path129" d="M 234.285,456.475 C 252.001,429.479 289.3,388.111 241.262,462.288 C 202.311,523.331 226.859,562.561 239.518,573.327 C 276.045,605.889 274.484,627.676 245.913,610.533 C 184.288,573.907 197.078,512.285 234.285,456.475 z " style="fill:url(#linearGradient1421);stroke:none;stroke-width:1.25;" />
|
||||
|
||||
<path transform="matrix(1.25,0,0,1.25,185.454,-167.505)" id="path131" d="M 490.662,467.52 C 475.343,435.819 426.528,355.618 492.988,448.917 C 553.449,533.214 511.01,591.93 503.452,597.744 C 495.895,603.557 470.315,615.184 477.873,594.837 C 485.43,574.49 523.107,535.864 490.662,467.52 z " style="fill:url(#linearGradient1423);stroke:none;stroke-width:1.25;" />
|
||||
|
||||
<path transform="matrix(1.25,0,0,1.25,185.454,-167.505)" id="path132" d="M 220.915,716.921 C 180.473,695.505 121.663,721.045 143.013,662.855 C 147.289,649.617 136.638,629.847 143.594,616.929 C 151.733,601.231 169.174,604.72 179.639,594.255 C 189.957,583.364 196.498,564.606 215.683,567.513 C 234.867,570.42 247.628,593.974 261.027,622.742 C 270.91,643.38 305.968,672.406 303.677,695.5 C 300.981,731 260.65,737.69 220.915,716.921 z " style="fill:url(#linearGradient1425);stroke:#e68c3f;stroke-width:6.25;" />
|
||||
|
||||
<path id="path177" d="M 415.072,495.764 C 412.065,520.67 379.259,572.391 345.554,577.298 C 311.294,582.634 279.122,543.238 271.407,506.184 C 261.518,464.978 293.994,448.584 343.345,449.557 C 396.646,451.211 417.466,463.448 415.072,495.764 z " style="font-size:12px;fill:url(#linearGradient1427);stroke:none;stroke-width:2.85509992;stroke-dasharray:none" transform="matrix(0.598206,0.268584,-0.239623,0.617213,700.568,140.464)" />
|
||||
|
||||
<path transform="matrix(-1.1685,0.423145,0.475283,1.16478,728.343,-213.821)" id="path133" d="M 220.274,718.402 C 178.947,694.812 120.38,724.007 143.013,662.855 C 147.749,649.787 136.417,629.303 143.373,616.385 C 151.512,600.687 169.174,604.72 179.639,594.255 C 189.957,583.364 198.466,566.387 217.651,569.294 C 236.835,572.201 247.628,593.974 261.027,622.742 C 270.91,643.38 304.442,671.713 302.151,694.807 C 299.455,730.307 259.427,740.278 220.274,718.402 z " style="fill:url(#linearGradient1429);stroke:#e68c3f;stroke-width:6.25067997;" />
|
||||
|
||||
<path transform="matrix(-0.945096,0.343745,0.424076,0.956058,714.328,-64.342)" id="path134" d="M 216.482,675.68 C 129.951,618.177 169.174,604.72 179.639,594.255 C 189.957,583.364 198.466,566.387 217.651,569.294 C 236.835,572.201 247.628,593.974 261.027,622.742 C 270.91,643.38 304.087,671.66 302.151,694.807 C 299.535,721.917 253.961,700.294 216.482,675.68 z " style="fill:url(#linearGradient1431);stroke:none;stroke-width:1.52532005;" />
|
||||
|
||||
<path transform="matrix(1.00431,-5.2286e-2,-1.74e-2,1.04575,244.191,-28.4653)" id="path135" d="M 216.506,677.071 C 129.975,619.568 169.709,603.501 182.56,595.791 C 197.959,585.849 197.718,564.96 216.903,567.867 C 236.087,570.774 247.628,593.974 261.027,622.742 C 270.91,643.38 304.087,671.66 302.151,694.807 C 299.535,721.917 253.985,701.685 216.506,677.071 z " style="fill:url(#linearGradient1433);stroke:none;stroke-width:1.52532005;" />
|
||||
|
||||
<path id="path136" d="M 415.072,495.764 C 412.065,520.67 379.259,572.391 345.554,577.298 C 311.294,582.634 279.122,543.238 271.407,506.184 C 261.518,464.978 293.994,448.584 343.345,449.557 C 396.646,451.211 417.466,463.448 415.072,495.764 z " style="font-size:12px;fill:#000000;stroke:none;stroke-width:2.85509992;" transform="matrix(0.515584,0.215259,-0.206526,0.49467,713.3,222.559)" />
|
||||
|
||||
<path id="path137" d="M 415.072,495.764 C 412.065,520.67 379.259,572.391 345.554,577.298 C 311.294,582.634 279.122,543.238 271.407,506.184 C 261.518,464.978 293.994,448.584 343.345,449.557 C 396.646,451.211 417.466,463.448 415.072,495.764 z " style="font-size:12px;fill:url(#linearGradient1435);stroke:none;stroke-width:2.85509992;" transform="matrix(0.351231,0.149463,-0.128856,0.343469,724.522,318.291)" />
|
||||
|
||||
<path transform="matrix(1.25,0,0,1.25,185.454,-167.505)" id="path119" d="M 309.954,338.729 C 317.101,331.959 334.765,311.663 367.915,332.974 C 374.077,336.984 379.077,337.351 390.936,342.429 C 414.662,352.178 403.318,375.688 378.192,383.537 C 367.434,387.026 357.656,400.093 338.063,398.976 C 321.329,397.999 316.944,387.102 306.665,381.07 C 288.396,370.759 285.7,356.816 295.565,349.417 C 305.431,342.018 309.29,339.358 309.954,338.729 z " style="fill:url(#linearGradient1437);stroke:#e68c3f;stroke-width:3.75;" />
|
||||
|
||||
<path transform="matrix(1.25,0,0,1.25,185.454,-167.505)" id="path120" d="M 391.251,357.645 C 381.368,358.226 359.858,379.736 337.185,379.736 C 314.512,379.736 301.141,358.807 297.653,358.807" style="fill:none;stroke:#e68c3f;stroke-width:2.5;" />
|
||||
|
||||
<path transform="matrix(0.627885,0,0,0.595666,392.366,51.8173)" id="path123" d="M 309.954,338.729 C 317.101,331.959 339.645,313.381 369.542,332.401 C 375.841,336.167 382.346,340.266 392.02,345.865 C 411.182,357.613 401.691,374.543 378.734,385.255 C 368.316,389.75 351.141,399.67 338.063,398.976 C 323.53,397.568 314.128,387.577 304.496,381.07 C 286.826,368.767 287.899,358.833 296.107,350.562 C 302.312,344.883 309.29,339.358 309.954,338.729 z " style="fill:url(#linearGradient1439);stroke:none;" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 21 KiB |
@ -4,7 +4,7 @@
|
||||
|
||||
- Simple, declarative API
|
||||
- 80+ usage examples
|
||||
- Battle tested, mature, 99.9%+ coverage
|
||||
- Battle tested, mature, 100% coverage (yes, every line is tested)
|
||||
|
||||
[GitHub](https://github.com/dolanmiu/docx)
|
||||
[Get Started](#Welcome)
|
||||
|
||||
@ -6,6 +6,7 @@ To create a `floating` image on top of text:
|
||||
|
||||
```ts
|
||||
const image = new ImageRun({
|
||||
type: 'gif',
|
||||
data: fs.readFileSync("./demo/images/pizza.gif"),
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -26,6 +27,7 @@ By default with no arguments, its an `inline` image:
|
||||
|
||||
```ts
|
||||
const image = new ImageRun({
|
||||
type: 'gif',
|
||||
data: fs.readFileSync("./demo/images/pizza.gif"),
|
||||
transformation: {
|
||||
width: 100,
|
||||
@ -59,6 +61,7 @@ const doc = new Document({
|
||||
new Paragraph({
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: [IMAGE_TYPE],
|
||||
data: [IMAGE_BUFFER],
|
||||
transformation: {
|
||||
width: [IMAGE_SIZE],
|
||||
@ -97,6 +100,7 @@ To change the position the image to be on top of the text, simply add the `float
|
||||
|
||||
```ts
|
||||
const image = new ImageRun({
|
||||
type: 'png',
|
||||
data: buffer,
|
||||
transformation: {
|
||||
width: 903,
|
||||
@ -115,6 +119,7 @@ const image = new ImageRun({
|
||||
|
||||
```ts
|
||||
const image = new ImageRun({
|
||||
type: 'png',
|
||||
data: buffer,
|
||||
transformation: {
|
||||
width: 903,
|
||||
@ -180,6 +185,7 @@ For example:
|
||||
|
||||
```ts
|
||||
const image = new ImageRun({
|
||||
type: 'gif',
|
||||
data: fs.readFileSync("./demo/images/pizza.gif"),
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -228,6 +234,7 @@ For example:
|
||||
|
||||
```ts
|
||||
const image = new ImageRun({
|
||||
type: 'gif',
|
||||
data: fs.readFileSync("./demo/images/pizza.gif"),
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -258,6 +265,7 @@ Specifies common non-visual DrawingML properties. A name, title and description
|
||||
|
||||
```ts
|
||||
const image = new ImageRun({
|
||||
type: 'gif',
|
||||
data: fs.readFileSync("./demo/images/pizza.gif"),
|
||||
altText: {
|
||||
title: "This is an ultimate title",
|
||||
|
||||
@ -76,7 +76,7 @@ patchDocument(fs.readFileSync("My Document.docx"), {
|
||||
],
|
||||
link: "https://www.google.co.uk",
|
||||
}),
|
||||
new ImageRun({ data: fs.readFileSync("./demo/images/dog.png"), transformation: { width: 100, height: 100 } }),
|
||||
new ImageRun({ type: 'png', data: fs.readFileSync("./demo/images/dog.png"), transformation: { width: 100, height: 100 } }),
|
||||
],
|
||||
}),
|
||||
],
|
||||
|
||||
@ -12,7 +12,8 @@ describe("ImageReplacer", () => {
|
||||
"test {test-image.png} test",
|
||||
[
|
||||
{
|
||||
stream: Buffer.from(""),
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
fileName: "test-image.png",
|
||||
transformation: {
|
||||
pixels: {
|
||||
|
||||
@ -150,12 +150,25 @@ describe("Compiler", () => {
|
||||
new Paragraph({
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "png",
|
||||
data: Buffer.from("", "base64"),
|
||||
transformation: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
},
|
||||
}),
|
||||
new ImageRun({
|
||||
type: "svg",
|
||||
data: Buffer.from("", "base64"),
|
||||
transformation: {
|
||||
width: 100,
|
||||
height: 100,
|
||||
},
|
||||
fallback: {
|
||||
type: "png",
|
||||
data: Buffer.from("", "base64"),
|
||||
},
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
@ -165,7 +178,8 @@ describe("Compiler", () => {
|
||||
|
||||
vi.spyOn(compiler["imageReplacer"], "getMediaData").mockReturnValue([
|
||||
{
|
||||
stream: Buffer.from(""),
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
fileName: "test",
|
||||
transformation: {
|
||||
pixels: {
|
||||
@ -178,6 +192,36 @@ describe("Compiler", () => {
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "svg",
|
||||
data: Buffer.from(""),
|
||||
fileName: "test",
|
||||
transformation: {
|
||||
pixels: {
|
||||
x: 100,
|
||||
y: 100,
|
||||
},
|
||||
emus: {
|
||||
x: 100,
|
||||
y: 100,
|
||||
},
|
||||
},
|
||||
fallback: {
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
fileName: "test",
|
||||
transformation: {
|
||||
pixels: {
|
||||
x: 100,
|
||||
y: 100,
|
||||
},
|
||||
emus: {
|
||||
x: 100,
|
||||
y: 100,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
compiler.compile(file);
|
||||
|
||||
@ -62,8 +62,13 @@ export class Compiler {
|
||||
}
|
||||
}
|
||||
|
||||
for (const { stream, fileName } of file.Media.Array) {
|
||||
zip.file(`word/media/${fileName}`, stream);
|
||||
for (const data of file.Media.Array) {
|
||||
if (data.type !== "svg") {
|
||||
zip.file(`word/media/${data.fileName}`, data.data);
|
||||
} else {
|
||||
zip.file(`word/media/${data.fileName}`, data.data);
|
||||
zip.file(`word/media/${data.fallback.fileName}`, data.fallback.data);
|
||||
}
|
||||
}
|
||||
|
||||
for (const { data: buffer, name, fontKey } of file.FontTable.fontOptionsWithKey) {
|
||||
|
||||
@ -25,12 +25,13 @@ describe("ContentTypes", () => {
|
||||
expect(tree["Types"][3]).to.deep.equal({ Default: { _attr: { ContentType: "image/jpeg", Extension: "jpg" } } });
|
||||
expect(tree["Types"][4]).to.deep.equal({ Default: { _attr: { ContentType: "image/bmp", Extension: "bmp" } } });
|
||||
expect(tree["Types"][5]).to.deep.equal({ Default: { _attr: { ContentType: "image/gif", Extension: "gif" } } });
|
||||
expect(tree["Types"][6]).to.deep.equal({
|
||||
expect(tree["Types"][6]).to.deep.equal({ Default: { _attr: { ContentType: "image/svg+xml", Extension: "svg" } } });
|
||||
expect(tree["Types"][7]).to.deep.equal({
|
||||
Default: { _attr: { ContentType: "application/vnd.openxmlformats-package.relationships+xml", Extension: "rels" } },
|
||||
});
|
||||
expect(tree["Types"][7]).to.deep.equal({ Default: { _attr: { ContentType: "application/xml", Extension: "xml" } } });
|
||||
expect(tree["Types"][8]).to.deep.equal({ Default: { _attr: { ContentType: "application/xml", Extension: "xml" } } });
|
||||
|
||||
expect(tree["Types"][8]).to.deep.equal({
|
||||
expect(tree["Types"][9]).to.deep.equal({
|
||||
Default: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.obfuscatedFont",
|
||||
@ -38,7 +39,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][9]).to.deep.equal({
|
||||
expect(tree["Types"][10]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml",
|
||||
@ -46,7 +47,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][10]).to.deep.equal({
|
||||
expect(tree["Types"][11]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml",
|
||||
@ -54,7 +55,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][11]).to.deep.equal({
|
||||
expect(tree["Types"][12]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-package.core-properties+xml",
|
||||
@ -62,7 +63,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][12]).to.deep.equal({
|
||||
expect(tree["Types"][13]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.custom-properties+xml",
|
||||
@ -70,7 +71,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][13]).to.deep.equal({
|
||||
expect(tree["Types"][14]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.extended-properties+xml",
|
||||
@ -78,7 +79,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][14]).to.deep.equal({
|
||||
expect(tree["Types"][15]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.numbering+xml",
|
||||
@ -86,7 +87,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][15]).to.deep.equal({
|
||||
expect(tree["Types"][16]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml",
|
||||
@ -94,7 +95,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(tree["Types"][16]).to.deep.equal({
|
||||
expect(tree["Types"][17]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.settings+xml",
|
||||
@ -111,7 +112,7 @@ describe("ContentTypes", () => {
|
||||
contentTypes.addFooter(102);
|
||||
const tree = new Formatter().format(contentTypes);
|
||||
|
||||
expect(tree["Types"][19]).to.deep.equal({
|
||||
expect(tree["Types"][20]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.footer+xml",
|
||||
@ -120,7 +121,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
});
|
||||
|
||||
expect(tree["Types"][20]).to.deep.equal({
|
||||
expect(tree["Types"][21]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.footer+xml",
|
||||
@ -137,7 +138,7 @@ describe("ContentTypes", () => {
|
||||
contentTypes.addHeader(202);
|
||||
const tree = new Formatter().format(contentTypes);
|
||||
|
||||
expect(tree["Types"][19]).to.deep.equal({
|
||||
expect(tree["Types"][20]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.header+xml",
|
||||
@ -146,7 +147,7 @@ describe("ContentTypes", () => {
|
||||
},
|
||||
});
|
||||
|
||||
expect(tree["Types"][20]).to.deep.equal({
|
||||
expect(tree["Types"][21]).to.deep.equal({
|
||||
Override: {
|
||||
_attr: {
|
||||
ContentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.header+xml",
|
||||
|
||||
@ -18,6 +18,7 @@ export class ContentTypes extends XmlComponent {
|
||||
this.root.push(new Default("image/jpeg", "jpg"));
|
||||
this.root.push(new Default("image/bmp", "bmp"));
|
||||
this.root.push(new Default("image/gif", "gif"));
|
||||
this.root.push(new Default("image/svg+xml", "svg"));
|
||||
this.root.push(new Default("application/vnd.openxmlformats-package.relationships+xml", "rels"));
|
||||
this.root.push(new Default("application/xml", "xml"));
|
||||
this.root.push(new Default("application/vnd.openxmlformats-officedocument.obfuscatedFont", "odttf"));
|
||||
|
||||
@ -11,8 +11,9 @@ import { Anchor } from "./anchor";
|
||||
const createAnchor = (drawingOptions: IDrawingOptions): Anchor =>
|
||||
new Anchor({
|
||||
mediaData: {
|
||||
type: "png",
|
||||
fileName: "test.png",
|
||||
stream: Buffer.from(""),
|
||||
data: Buffer.from(""),
|
||||
transformation: {
|
||||
pixels: {
|
||||
x: 0,
|
||||
|
||||
@ -11,8 +11,9 @@ const imageBase64Data = `iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAACzVBMVEU
|
||||
const createDrawing = (drawingOptions?: IDrawingOptions): Drawing =>
|
||||
new Drawing(
|
||||
{
|
||||
type: "jpg",
|
||||
fileName: "test.jpg",
|
||||
stream: Buffer.from(imageBase64Data, "base64"),
|
||||
data: Buffer.from(imageBase64Data, "base64"),
|
||||
transformation: {
|
||||
pixels: {
|
||||
x: 100,
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
import { BuilderElement, XmlComponent } from "@file/xml-components";
|
||||
import { IMediaData } from "@file/media";
|
||||
|
||||
const createSvgBlip = (mediaData: IMediaData): XmlComponent =>
|
||||
new BuilderElement({
|
||||
name: "asvg:svgBlip",
|
||||
attributes: {
|
||||
asvg: {
|
||||
key: "xmlns:asvg",
|
||||
value: "http://schemas.microsoft.com/office/drawing/2016/SVG/main",
|
||||
},
|
||||
embed: {
|
||||
key: "r:embed",
|
||||
value: `rId{${mediaData.fileName}}`,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const createExtention = (mediaData: IMediaData): XmlComponent =>
|
||||
new BuilderElement({
|
||||
name: "a:ext",
|
||||
attributes: {
|
||||
uri: {
|
||||
key: "uri",
|
||||
value: "{96DAC541-7B7A-43D3-8B79-37D633B846F1}",
|
||||
},
|
||||
},
|
||||
children: [createSvgBlip(mediaData)],
|
||||
});
|
||||
|
||||
export const createExtentionList = (mediaData: IMediaData): XmlComponent =>
|
||||
new BuilderElement({
|
||||
name: "a:extLst",
|
||||
children: [createExtention(mediaData)],
|
||||
});
|
||||
@ -1,7 +1,7 @@
|
||||
import { IMediaData } from "@file/media";
|
||||
import { XmlComponent } from "@file/xml-components";
|
||||
|
||||
import { Blip } from "./blip";
|
||||
import { createBlip } from "./blip";
|
||||
import { SourceRectangle } from "./source-rectangle";
|
||||
import { Stretch } from "./stretch";
|
||||
|
||||
@ -9,7 +9,7 @@ export class BlipFill extends XmlComponent {
|
||||
public constructor(mediaData: IMediaData) {
|
||||
super("pic:blipFill");
|
||||
|
||||
this.root.push(new Blip(mediaData));
|
||||
this.root.push(createBlip(mediaData));
|
||||
this.root.push(new SourceRectangle());
|
||||
this.root.push(new Stretch());
|
||||
}
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
import { IMediaData } from "@file/media";
|
||||
import { XmlAttributeComponent, XmlComponent } from "@file/xml-components";
|
||||
import { BuilderElement, XmlComponent } from "@file/xml-components";
|
||||
import { createExtentionList } from "./blip-extentions";
|
||||
|
||||
class BlipAttributes extends XmlAttributeComponent<{
|
||||
type BlipAttributes = {
|
||||
readonly embed: string;
|
||||
readonly cstate: string;
|
||||
}> {
|
||||
protected readonly xmlKeys = {
|
||||
embed: "r:embed",
|
||||
cstate: "cstate",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export class Blip extends XmlComponent {
|
||||
public constructor(mediaData: IMediaData) {
|
||||
super("a:blip");
|
||||
this.root.push(
|
||||
new BlipAttributes({
|
||||
embed: `rId{${mediaData.fileName}}`,
|
||||
cstate: "none",
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
export const createBlip = (mediaData: IMediaData): XmlComponent =>
|
||||
new BuilderElement<BlipAttributes>({
|
||||
name: "a:blip",
|
||||
attributes: {
|
||||
embed: {
|
||||
key: "r:embed",
|
||||
value: `rId{${mediaData.type === "svg" ? mediaData.fallback.fileName : mediaData.fileName}}`,
|
||||
},
|
||||
cstate: {
|
||||
key: "cstate",
|
||||
value: "none",
|
||||
},
|
||||
},
|
||||
children: mediaData.type === "svg" ? [createExtentionList(mediaData)] : [],
|
||||
});
|
||||
|
||||
@ -8,8 +8,9 @@ describe("Inline", () => {
|
||||
const tree = new Formatter().format(
|
||||
createInline({
|
||||
mediaData: {
|
||||
type: "png",
|
||||
fileName: "test.png",
|
||||
stream: Buffer.from(""),
|
||||
data: Buffer.from(""),
|
||||
transformation: {
|
||||
pixels: {
|
||||
x: 0,
|
||||
|
||||
@ -436,7 +436,44 @@ describe("File", () => {
|
||||
it("should work with external styles", () => {
|
||||
const doc = new File({
|
||||
sections: [],
|
||||
externalStyles: "",
|
||||
externalStyles: `
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
||||
<w:styles xmlns:mc="first" xmlns:r="second">
|
||||
<w:docDefaults>
|
||||
<w:rPrDefault>
|
||||
<w:rPr>
|
||||
<w:rFonts w:ascii="Arial" w:eastAsiaTheme="minorHAnsi" w:hAnsi="Arial" w:cstheme="minorHAnsi"/>
|
||||
<w:lang w:val="en-US" w:eastAsia="en-US" w:bidi="ar-SA"/>
|
||||
</w:rPr>
|
||||
</w:rPrDefault>
|
||||
<w:pPrDefault>
|
||||
<w:pPr>
|
||||
<w:spacing w:after="160" w:line="259" w:lineRule="auto"/>
|
||||
</w:pPr>
|
||||
</w:pPrDefault>
|
||||
</w:docDefaults>
|
||||
|
||||
<w:latentStyles w:defLockedState="1" w:defUIPriority="99">
|
||||
</w:latentStyles>
|
||||
|
||||
<w:style w:type="paragraph" w:default="1" w:styleId="Normal">
|
||||
<w:name w:val="Normal"/>
|
||||
<w:qFormat/>
|
||||
</w:style>
|
||||
|
||||
<w:style w:type="paragraph" w:styleId="Heading1">
|
||||
<w:name w:val="heading 1"/>
|
||||
<w:basedOn w:val="Normal"/>
|
||||
<w:pPr>
|
||||
<w:keepNext/>
|
||||
<w:keepLines/>
|
||||
|
||||
<w:pBdr>
|
||||
<w:bottom w:val="single" w:sz="4" w:space="1" w:color="auto"/>
|
||||
</w:pBdr>
|
||||
</w:pPr>
|
||||
</w:style>
|
||||
</w:styles>`,
|
||||
});
|
||||
|
||||
expect(doc.Styles).to.not.be.undefined;
|
||||
|
||||
@ -84,7 +84,7 @@ export class File {
|
||||
|
||||
this.media = new Media();
|
||||
|
||||
if (options.externalStyles) {
|
||||
if (options.externalStyles !== undefined) {
|
||||
const stylesFactory = new ExternalStylesFactory();
|
||||
this.styles = stylesFactory.newInstance(options.externalStyles);
|
||||
} else if (options.styles) {
|
||||
|
||||
@ -14,11 +14,25 @@ export interface IMediaDataTransformation {
|
||||
readonly rotation?: number;
|
||||
}
|
||||
|
||||
export interface IMediaData {
|
||||
readonly stream: Buffer | Uint8Array | ArrayBuffer;
|
||||
type CoreMediaData = {
|
||||
readonly fileName: string;
|
||||
readonly transformation: IMediaDataTransformation;
|
||||
}
|
||||
readonly data: Buffer | Uint8Array | ArrayBuffer;
|
||||
};
|
||||
|
||||
type RegularMediaData = {
|
||||
readonly type: "jpg" | "png" | "gif" | "bmp";
|
||||
};
|
||||
|
||||
type SvgMediaData = {
|
||||
readonly type: "svg";
|
||||
/**
|
||||
* Required in case the Word processor does not support SVG.
|
||||
*/
|
||||
readonly fallback: RegularMediaData & CoreMediaData;
|
||||
};
|
||||
|
||||
export type IMediaData = (RegularMediaData | SvgMediaData) & CoreMediaData;
|
||||
|
||||
// Needed because of: https://github.com/s-panferov/awesome-typescript-loader/issues/432
|
||||
/**
|
||||
|
||||
@ -19,7 +19,8 @@ describe("Media", () => {
|
||||
const media = new Media();
|
||||
|
||||
media.addImage("test2.png", {
|
||||
stream: Buffer.from(""),
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
fileName: "test.png",
|
||||
transformation: {
|
||||
pixels: {
|
||||
|
||||
@ -19,6 +19,7 @@ describe("ImageRun", () => {
|
||||
describe("#constructor()", () => {
|
||||
it("should create with Buffer", () => {
|
||||
const currentImageRun = new ImageRun({
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -39,8 +40,7 @@ describe("ImageRun", () => {
|
||||
const tree = new Formatter().format(currentImageRun, {
|
||||
file: {
|
||||
Media: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
addImage: () => {},
|
||||
addImage: vi.fn(),
|
||||
},
|
||||
} as unknown as File,
|
||||
viewWrapper: {} as unknown as IViewWrapper,
|
||||
@ -271,6 +271,7 @@ describe("ImageRun", () => {
|
||||
|
||||
it("should create with string", () => {
|
||||
const currentImageRun = new ImageRun({
|
||||
type: "png",
|
||||
data: "",
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -291,8 +292,7 @@ describe("ImageRun", () => {
|
||||
const tree = new Formatter().format(currentImageRun, {
|
||||
file: {
|
||||
Media: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
addImage: () => {},
|
||||
addImage: vi.fn(),
|
||||
},
|
||||
} as unknown as File,
|
||||
viewWrapper: {} as unknown as IViewWrapper,
|
||||
@ -522,10 +522,10 @@ describe("ImageRun", () => {
|
||||
});
|
||||
|
||||
it("should return UInt8Array if atob is present", () => {
|
||||
// eslint-disable-next-line functional/immutable-data
|
||||
global.atob = () => "atob result";
|
||||
vi.spyOn(global, "atob").mockReturnValue("atob result");
|
||||
|
||||
const currentImageRun = new ImageRun({
|
||||
type: "png",
|
||||
data: "",
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -546,8 +546,7 @@ describe("ImageRun", () => {
|
||||
const tree = new Formatter().format(currentImageRun, {
|
||||
file: {
|
||||
Media: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
addImage: () => {},
|
||||
addImage: vi.fn(),
|
||||
},
|
||||
} as unknown as File,
|
||||
viewWrapper: {} as unknown as IViewWrapper,
|
||||
@ -775,16 +774,13 @@ describe("ImageRun", () => {
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, functional/immutable-data
|
||||
(global as any).atob = undefined;
|
||||
});
|
||||
|
||||
it("should use data as is if its not a string", () => {
|
||||
// eslint-disable-next-line functional/immutable-data
|
||||
global.atob = () => "atob result";
|
||||
vi.spyOn(global, "atob").mockReturnValue("atob result");
|
||||
|
||||
const currentImageRun = new ImageRun({
|
||||
type: "png",
|
||||
data: "",
|
||||
transformation: {
|
||||
width: 200,
|
||||
@ -805,8 +801,7 @@ describe("ImageRun", () => {
|
||||
const tree = new Formatter().format(currentImageRun, {
|
||||
file: {
|
||||
Media: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
addImage: () => {},
|
||||
addImage: vi.fn(),
|
||||
},
|
||||
} as unknown as File,
|
||||
viewWrapper: {} as unknown as IViewWrapper,
|
||||
@ -1034,9 +1029,107 @@ describe("ImageRun", () => {
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, functional/immutable-data
|
||||
(global as any).atob = undefined;
|
||||
it("should strip base64 marker", () => {
|
||||
const spy = vi.spyOn(global, "atob").mockReturnValue("atob result");
|
||||
|
||||
new ImageRun({
|
||||
type: "png",
|
||||
data: ";base64,",
|
||||
transformation: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
rotation: 45,
|
||||
},
|
||||
});
|
||||
|
||||
expect(spy).toBeCalledWith("");
|
||||
});
|
||||
|
||||
it("should work with svgs", () => {
|
||||
const currentImageRun = new ImageRun({
|
||||
type: "svg",
|
||||
data: Buffer.from(""),
|
||||
transformation: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
},
|
||||
fallback: {
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
},
|
||||
});
|
||||
|
||||
const tree = new Formatter().format(currentImageRun, {
|
||||
file: {
|
||||
Media: {
|
||||
addImage: vi.fn(),
|
||||
},
|
||||
} as unknown as File,
|
||||
viewWrapper: {} as unknown as IViewWrapper,
|
||||
stack: [],
|
||||
});
|
||||
|
||||
expect(tree).toStrictEqual({
|
||||
"w:r": [
|
||||
{
|
||||
"w:drawing": [
|
||||
{
|
||||
"wp:inline": expect.arrayContaining([
|
||||
{
|
||||
"a:graphic": expect.arrayContaining([
|
||||
{
|
||||
"a:graphicData": expect.arrayContaining([
|
||||
{
|
||||
"pic:pic": expect.arrayContaining([
|
||||
{
|
||||
"pic:blipFill": expect.arrayContaining([
|
||||
{
|
||||
"a:blip": [
|
||||
{
|
||||
_attr: {
|
||||
cstate: "none",
|
||||
"r:embed": "rId{test-unique-id.png}",
|
||||
},
|
||||
},
|
||||
{
|
||||
"a:extLst": [
|
||||
{
|
||||
"a:ext": [
|
||||
{
|
||||
_attr: {
|
||||
uri: "{96DAC541-7B7A-43D3-8B79-37D633B846F1}",
|
||||
},
|
||||
},
|
||||
{
|
||||
"asvg:svgBlip": {
|
||||
_attr: expect.objectContaining({
|
||||
"r:embed":
|
||||
"rId{test-unique-id.svg}",
|
||||
}),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]),
|
||||
},
|
||||
]),
|
||||
},
|
||||
]),
|
||||
},
|
||||
]),
|
||||
},
|
||||
]),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -9,38 +9,102 @@ import { IMediaTransformation } from "../../media";
|
||||
import { IMediaData } from "../../media/data";
|
||||
import { Run } from "../run";
|
||||
|
||||
export interface IImageOptions {
|
||||
readonly data: Buffer | string | Uint8Array | ArrayBuffer;
|
||||
type CoreImageOptions = {
|
||||
readonly transformation: IMediaTransformation;
|
||||
readonly floating?: IFloating;
|
||||
readonly altText?: DocPropertiesOptions;
|
||||
readonly outline?: OutlineOptions;
|
||||
}
|
||||
};
|
||||
|
||||
type RegularImageOptions = {
|
||||
readonly type: "jpg" | "png" | "gif" | "bmp";
|
||||
readonly data: Buffer | string | Uint8Array | ArrayBuffer;
|
||||
};
|
||||
|
||||
type SvgMediaOptions = {
|
||||
readonly type: "svg";
|
||||
readonly data: Buffer | string | Uint8Array | ArrayBuffer;
|
||||
/**
|
||||
* Required in case the Word processor does not support SVG.
|
||||
*/
|
||||
readonly fallback: RegularImageOptions;
|
||||
};
|
||||
|
||||
export type IImageOptions = (RegularImageOptions | SvgMediaOptions) & CoreImageOptions;
|
||||
|
||||
const convertDataURIToBinary = (dataURI: string): Uint8Array => {
|
||||
if (typeof atob === "function") {
|
||||
// https://gist.github.com/borismus/1032746
|
||||
// https://github.com/mafintosh/base64-to-uint8array
|
||||
const BASE64_MARKER = ";base64,";
|
||||
const base64Index = dataURI.indexOf(BASE64_MARKER);
|
||||
|
||||
const base64IndexWithOffset = base64Index === -1 ? 0 : base64Index + BASE64_MARKER.length;
|
||||
|
||||
return new Uint8Array(
|
||||
atob(dataURI.substring(base64IndexWithOffset))
|
||||
.split("")
|
||||
.map((c) => c.charCodeAt(0)),
|
||||
);
|
||||
/* c8 ignore next 6 */
|
||||
} else {
|
||||
// Not possible to test this branch in NodeJS
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
|
||||
const b = require("buf" + "fer");
|
||||
return new b.Buffer(dataURI, "base64");
|
||||
}
|
||||
};
|
||||
|
||||
const standardizeData = (data: string | Buffer | Uint8Array | ArrayBuffer): Buffer | Uint8Array | ArrayBuffer =>
|
||||
typeof data === "string" ? convertDataURIToBinary(data) : data;
|
||||
|
||||
const createImageData = (options: IImageOptions, key: string): Pick<IMediaData, "data" | "fileName" | "transformation"> => ({
|
||||
data: standardizeData(options.data),
|
||||
fileName: key,
|
||||
transformation: {
|
||||
pixels: {
|
||||
x: Math.round(options.transformation.width),
|
||||
y: Math.round(options.transformation.height),
|
||||
},
|
||||
emus: {
|
||||
x: Math.round(options.transformation.width * 9525),
|
||||
y: Math.round(options.transformation.height * 9525),
|
||||
},
|
||||
flip: options.transformation.flip,
|
||||
rotation: options.transformation.rotation ? options.transformation.rotation * 60000 : undefined,
|
||||
},
|
||||
});
|
||||
|
||||
export class ImageRun extends Run {
|
||||
private readonly key = `${uniqueId()}.png`;
|
||||
private readonly key: string;
|
||||
private readonly fallbackKey = `${uniqueId()}.png`;
|
||||
private readonly imageData: IMediaData;
|
||||
|
||||
public constructor(options: IImageOptions) {
|
||||
super({});
|
||||
const newData = typeof options.data === "string" ? this.convertDataURIToBinary(options.data) : options.data;
|
||||
|
||||
this.imageData = {
|
||||
stream: newData,
|
||||
fileName: this.key,
|
||||
transformation: {
|
||||
pixels: {
|
||||
x: Math.round(options.transformation.width),
|
||||
y: Math.round(options.transformation.height),
|
||||
},
|
||||
emus: {
|
||||
x: Math.round(options.transformation.width * 9525),
|
||||
y: Math.round(options.transformation.height * 9525),
|
||||
},
|
||||
flip: options.transformation.flip,
|
||||
rotation: options.transformation.rotation ? options.transformation.rotation * 60000 : undefined,
|
||||
},
|
||||
};
|
||||
this.key = `${uniqueId()}.${options.type}`;
|
||||
|
||||
this.imageData =
|
||||
options.type === "svg"
|
||||
? {
|
||||
type: options.type,
|
||||
...createImageData(options, this.key),
|
||||
fallback: {
|
||||
type: options.fallback.type,
|
||||
...createImageData(
|
||||
{
|
||||
...options.fallback,
|
||||
transformation: options.transformation,
|
||||
},
|
||||
this.fallbackKey,
|
||||
),
|
||||
},
|
||||
}
|
||||
: {
|
||||
type: options.type,
|
||||
...createImageData(options, this.key),
|
||||
};
|
||||
const drawing = new Drawing(this.imageData, {
|
||||
floating: options.floating,
|
||||
docProperties: options.altText,
|
||||
@ -53,29 +117,10 @@ export class ImageRun extends Run {
|
||||
public prepForXml(context: IContext): IXmlableObject | undefined {
|
||||
context.file.Media.addImage(this.key, this.imageData);
|
||||
|
||||
if (this.imageData.type === "svg") {
|
||||
context.file.Media.addImage(this.fallbackKey, this.imageData.fallback);
|
||||
}
|
||||
|
||||
return super.prepForXml(context);
|
||||
}
|
||||
|
||||
private convertDataURIToBinary(dataURI: string): Uint8Array {
|
||||
if (typeof atob === "function") {
|
||||
// https://gist.github.com/borismus/1032746
|
||||
// https://github.com/mafintosh/base64-to-uint8array
|
||||
const BASE64_MARKER = ";base64,";
|
||||
const base64Index = dataURI.indexOf(BASE64_MARKER);
|
||||
|
||||
const base64IndexWithOffset = base64Index === -1 ? 0 : base64Index + BASE64_MARKER.length;
|
||||
|
||||
return new Uint8Array(
|
||||
atob(dataURI.substring(base64IndexWithOffset))
|
||||
.split("")
|
||||
.map((c) => c.charCodeAt(0)),
|
||||
);
|
||||
/* c8 ignore next 6 */
|
||||
} else {
|
||||
// Not possible to test this branch in NodeJS
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
|
||||
const b = require("buf" + "fer");
|
||||
return new b.Buffer(dataURI, "base64");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,11 +23,9 @@ export class Text extends XmlComponent {
|
||||
if (typeof options === "string") {
|
||||
this.root.push(new TextAttributes({ space: SpaceType.PRESERVE }));
|
||||
this.root.push(options);
|
||||
return this;
|
||||
} else {
|
||||
this.root.push(new TextAttributes({ space: options.space ?? SpaceType.DEFAULT }));
|
||||
this.root.push(options.text);
|
||||
return this;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -254,6 +254,7 @@ describe("from-docx", () => {
|
||||
link: "https://www.google.co.uk",
|
||||
}),
|
||||
new ImageRun({
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
transformation: { width: 100, height: 100 },
|
||||
}),
|
||||
@ -266,6 +267,7 @@ describe("from-docx", () => {
|
||||
type: PatchType.PARAGRAPH,
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
transformation: { width: 100, height: 100 },
|
||||
}),
|
||||
@ -310,6 +312,7 @@ describe("from-docx", () => {
|
||||
type: PatchType.PARAGRAPH,
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
transformation: { width: 100, height: 100 },
|
||||
}),
|
||||
@ -354,6 +357,7 @@ describe("from-docx", () => {
|
||||
type: PatchType.PARAGRAPH,
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
transformation: { width: 100, height: 100 },
|
||||
}),
|
||||
@ -391,6 +395,7 @@ describe("from-docx", () => {
|
||||
type: PatchType.PARAGRAPH,
|
||||
children: [
|
||||
new ImageRun({
|
||||
type: "png",
|
||||
data: Buffer.from(""),
|
||||
transformation: { width: 100, height: 100 },
|
||||
}),
|
||||
|
||||
@ -215,7 +215,7 @@ export const patchDocument = async (data: InputDataType, options: PatchDocumentO
|
||||
zip.file(key, value);
|
||||
}
|
||||
|
||||
for (const { stream, fileName } of file.Media.Array) {
|
||||
for (const { data: stream, fileName } of file.Media.Array) {
|
||||
zip.file(`word/media/${fileName}`, stream);
|
||||
}
|
||||
|
||||
|
||||
@ -62,10 +62,10 @@ export default defineConfig({
|
||||
provider: "v8",
|
||||
reporter: ["text", "json", "html"],
|
||||
thresholds: {
|
||||
statements: 99.98,
|
||||
branches: 99.15,
|
||||
statements: 100,
|
||||
branches: 99.35,
|
||||
functions: 100,
|
||||
lines: 99.98,
|
||||
lines: 100,
|
||||
},
|
||||
exclude: [
|
||||
...configDefaults.exclude,
|
||||
|
||||
Reference in New Issue
Block a user