113 lines
2.5 KiB
JavaScript
113 lines
2.5 KiB
JavaScript
var bricks = window.bricks || {};
|
|
bricks.Image = class extends bricks.JsWidget {
|
|
/*
|
|
{
|
|
url:
|
|
height:
|
|
width:
|
|
}
|
|
*/
|
|
constructor(opts){
|
|
super(opts);
|
|
this.opts = opts;
|
|
if (this.opts.url){
|
|
this.set_url(this.opts.url);
|
|
}
|
|
}
|
|
create(){
|
|
this.dom_element = document.createElement('img');
|
|
}
|
|
removeBase64Header(base64String) {
|
|
return base64String.replace(/^data:[^;]*;base64,/, '');
|
|
}
|
|
base64(){
|
|
const image = this.dom_element;
|
|
// 创建一个画布来绘制图像
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// 设置画布大小与图像相同
|
|
canvas.width = image.width;
|
|
canvas.height = image.height;
|
|
|
|
// 将图像绘制到画布上
|
|
ctx.drawImage(image, 0, 0);
|
|
|
|
// 获取画布数据并转换为 base64
|
|
var dataURL = canvas.toDataURL('image/png'); // 可以根据需要修改图像格式
|
|
// dataURL = this.removeBase64Header(dataURL);
|
|
return dataURL;
|
|
}
|
|
set_url(url){
|
|
this.url = url;
|
|
if (this.opts.default_url) {
|
|
this.dom_element.onerror = this.set_default_url.bind(this)
|
|
}
|
|
this.dom_element.src = url;
|
|
}
|
|
set_default_url(){
|
|
console.log('default_url', this.opts.default_url);
|
|
this.dom_element.onerror = null;
|
|
this.dom_element.src = this.opts.default_url;
|
|
}
|
|
}
|
|
|
|
bricks.Icon = class extends bricks.Image {
|
|
constructor(opts){
|
|
super(opts);
|
|
}
|
|
options_parse(){
|
|
this.rate = this.rate || 1;
|
|
var siz = bricks.app.charsize * this.rate + 'px';
|
|
this.set_url(this.url)
|
|
this.cwidth = this.opts.cwidth || 1;
|
|
this.cheight = this.opts.cheight || 1;
|
|
this.dynsize = this.opts.dynsize || true;
|
|
this.charsize_sizing();
|
|
}
|
|
}
|
|
|
|
bricks.StatedIcon = class extends bricks.Icon {
|
|
/*
|
|
states:[{state:aaa,url:} ,,]
|
|
state:aaa,
|
|
*/
|
|
constructor(opts){
|
|
super(opts);
|
|
}
|
|
options_parse(){
|
|
if (! this.states){
|
|
return;
|
|
}
|
|
if (! this.state){
|
|
this.state = this.states[0].state;
|
|
}
|
|
this.set_state(this.state);
|
|
}
|
|
set_state(state){
|
|
this.state = state;
|
|
this.states.forEach(s => {
|
|
if(s.state == this.state){
|
|
this.url = s.url
|
|
super.options_parse();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
bricks.BlankIcon = class extends bricks.JsWidget {
|
|
constructor(opts){
|
|
super(opts);
|
|
this.rate = opts.rate || 1;
|
|
this.cwidth = this.opts.cwidth || 1;
|
|
this.cheight = this.opts.cheight || 1;
|
|
this.dynsize = this.opts.dynsize || true;
|
|
this.charsize_sizing();
|
|
}
|
|
}
|
|
|
|
bricks.Factory.register('Image', bricks.Image);
|
|
bricks.Factory.register('StatedIcon', bricks.StatedIcon);
|
|
bricks.Factory.register('Icon', bricks.Icon);
|
|
bricks.Factory.register('BlankIcon', bricks.BlankIcon);
|