Laya中base64图片的处理与裁切

it2025-12-20  10

Laya中base64图片的处理与裁切

base64大概的样子:

data:image/png;base64,iVBORw0KGgo…

base64读取:

var base64 = "data:image/png;base64,iVBORw0KGgo...";//请传入正确base64,此处只是演示 // base64转Blob函数 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); // Blob转换成url var url= Laya.Browser.window.URL.createObjectURL( blob ); //有了url可以通过Laya.loader.load加载 //注意:一定要填写type这样加载才能识别 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 ); // 获得url

关键词:Laya base64

最新回复(0)