Skip to content

Commit

Permalink
Merge pull request #860 from ecomfe/fix-ssr-image
Browse files Browse the repository at this point in the history
fix: optimize image type check in the svg renderer.
  • Loading branch information
pissang authored Dec 22, 2021
2 parents cd718dc + 7a2a420 commit 27b5070
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 11 deletions.
29 changes: 19 additions & 10 deletions src/svg/graphic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import mapStyleToAttrs from './mapStyleToAttrs';
import { SVGVNodeAttrs, createVNode, SVGVNode, vNodeToString, BrushScope } from './core';
import { MatrixArray } from '../core/matrix';
import Displayable from '../graphic/Displayable';
import { assert, logError, map, retrieve2 } from '../core/util';
import { assert, isFunction, isString, logError, map, retrieve2 } from '../core/util';
import Polyline from '../graphic/shape/Polyline';
import Polygon from '../graphic/shape/Polygon';
import { GradientObject } from '../graphic/Gradient';
Expand All @@ -42,6 +42,13 @@ import { DEFAULT_FONT, DEFAULT_FONT_FAMILY } from '../core/platform';

const round = Math.round;

function isImageLike(val: any): val is HTMLImageElement {
return val && isString(val.src);
}
function isCanvasLike(val: any): val is HTMLCanvasElement {
return val && isFunction(val.toDataURL);
}


type AllStyleOption = PathStyleProps | TSpanStyleProps | ImageStyleProps;

Expand Down Expand Up @@ -204,12 +211,14 @@ export function brushSVGImage(el: ZRImage, scope: BrushScope) {
const style = el.style;
let image = style.image;

if (image instanceof HTMLImageElement) {
image = image.src;
}
// heatmap layer in geo may be a canvas
else if (image instanceof HTMLCanvasElement) {
image = image.toDataURL();
if (image && !isString(image)) {
if (isImageLike(image)) {
image = image.src;
}
// heatmap layer in geo may be a canvas
else if (isCanvasLike(image)) {
image = image.toDataURL();
}
}

if (!image) {
Expand Down Expand Up @@ -472,13 +481,13 @@ function setPattern(
let imageHeight = val.imageHeight;
let imageSrc;
const patternImage = val.image;
if (typeof patternImage === 'string') {
if (isString(patternImage)) {
imageSrc = patternImage;
}
else if (patternImage instanceof HTMLImageElement) {
else if (isImageLike(patternImage)) {
imageSrc = patternImage.src;
}
else if (patternImage instanceof HTMLCanvasElement) {
else if (isCanvasLike(patternImage)) {
imageSrc = patternImage.toDataURL();
}

Expand Down
4 changes: 3 additions & 1 deletion test/svg-ssr.html
Original file line number Diff line number Diff line change
Expand Up @@ -135,14 +135,16 @@


// Image with cliPath
const imageObj = new Image();
imageObj.src = 'asset/test.png';
for (let k = 0; k < 2; k++) {
const group = new zrender.Group();
for (let i = 0; i < 10; i++) {
const el = new zrender.Image({
x: i * cellSize + (cellSize - elSize) / 2,
y: cellSize * (5 + k),
style: {
image: 'asset/test.png',
image: k ? 'asset/test.png' : imageObj,
width: elSize,
height: elSize
}
Expand Down

0 comments on commit 27b5070

Please sign in to comment.