两点注意:
1、后端返回数据 byte[]
2、前端<image [src]="url">
this.url = location.protocol + '//' + location.hostname + ':8888' + '/image/{name}/{time}'
这里8888是服务的端口。name和time是参数。
controller: 纯手打,ImageUtil 是 帮助快速生成图片的工具类, draw是回调画法,返回对象是uitl本身的语法糖,可以继续getImage()或者getByte(),或者save()保存为文件。Counter对象的设计是为了方便更好的在一些函数内进行计算。
private static final int WIDTH = 480;
private static final int HEIGHT = 360;
@RequestMapping(value="/{name}/{time}", method = RequestMethod.GET)
@ResponseBody
public byte[] image(@PathVariable String name, @PathVariable String time, HttpServletRequest request) {
int excursion = 10; // 图片偏移量
Object object = request.getSession().getAttribute(name);
final Counter counter = object != null ? (Counter) object : Counter.create();
byte[] buffer = ImageUtil.me().draw(WIDTH, HEIGHT, 1, (graphics) -> {
graphics.setColor(Color.WHITE);
graphics.fillRect(0, 0, WIDTH, HEIGHT);
graphics.setColor(Color.BLACK);
Point p = new Point(0,counter.getCount() == 0 ? HEIGHT - DateUtil.random(HEIGHT) : counter.getCount());
int x, y;
for (x = 0; x < WIDTH; x += excursion) {
y = HEIGHT - DateUtil.random(HEIGHT);
graphics.drawLine(p.x, p.y, x, y);
p.x = x;
p.y = y;
counter.setCount(p.y);
}
request.getSession().setAttribute(name, counter);
}).getBytes();
return buffer;
}
ts:
iamges = ['/image/a', '/image/b', '/image/c', '/image/d', '/image/e', '/image/f'];
urls = [];
ngOInit() {
setInterval( () => {
this.urls = [];
const imageUrl = location.protocol + '//' + location.hostname + ':8888';
this.iamges.forEach( url => {
url = imageUrl + url + '/' + new Date().getTime();
this.urls.push(url);
});
}, 1000);
}
html:
<div class='cpu' *ngFor="let url of this.urls">
<img [src]="{{url}}">
</div>