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的图片的两种设置方法：

  1. 通过url
var url = "res/img/img.png";
var img =  new Laya.Image(url);
var newUrl = "res/img/img2.png"
img.skin = url;
  1. 通过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

评论