Laya中base64图片的处理与裁切
base64大概的样子:
data:image/png;base64,iVBORw0KGgo…
base64读取:
var base64
= "data:image/png;base64,iVBORw0KGgo...";
var dataURLtoBlob = function(base64Data
) {
var byteString
;
if (base64Data
.split(",")[0].indexOf("base64") >= 0){
byteString
= atob(base64Data
.split(",")[1]);
}else{
byteString
= Laya
.Browser
.window
.unescape(base64Data
.split(",")[1]);
}
var mimeString
= base64Data
.split(",")[0].split(":")[1].split(";")[0];
var ia
= new Uint8Array(byteString
.length
);
for (var i
= 0; i
< byteString
.length
; i
++) {
ia
[i
] = byteString
.charCodeAt(i
);
}
return new Laya.Browser.window.Blob([ia
], {
type
: mimeString
});
};
var blob
= dataURLtoBlob(base64
);
var url
= Laya
.Browser
.window
.URL.createObjectURL( blob
);
Laya
.loader
.load(
[
{
url
: DateManager
.MY_BOOMOJI_IMAGE_URL,
type
: Laya
.Loader
.IMAGE
}
],
Laya
.Handler
.create(this, this.onLoaded
)
);
切割图片:
传入大图返回切割texture
var changeTexture = function(row
, cal
, url
) {
var totalTexture
= Laya
.loader
.getRes(url
);
var texture
= Laya
.Texture
.createFromTexture(
totalTexture
,
256 * row
,
256 * cal
,
256,
256
);
return texture
;
};
UI中Image的图片的两种设置方法:
通过url
var url
= "res/img/img.png";
var img
= new Laya.Image(url
);
var newUrl
= "res/img/img2.png"
img
.skin
= url
;
通过texture
var url
= "res/img/img.png";
var img
= new Laya.Image(url
);
var newUrl
= "res/img/img2.png"
var texture
= Laya
.Loader
.getRes(newUrl
);
img
.source
= texture
;
注意:通过texture方法可以立即更换,通过url方法在某些情况下会延迟。
texture转url
texture -> sp -> canvas -> base64 ->blob -> url
var sp
= new Laya.Sprite();
sp
.graphics
.drawTexture(DataManager
.MY_BOOMOJI_TEX);
var htmlCanvas
= sp
.drawToCanvas(256, 256, 0, 0);
var canvas
= htmlCanvas
.getCanvas();
var base64
= canvas
.toDataURL("image/png");
var blob
= JiaoWei
.dataURLtoBlob(base64
);
var url
= Laya
.Browser
.window
.URL.createObjectURL( blob
);
关键词:Laya base64