Hướng dẫn dùng alpha png trong PHP

Như tôi đã nói, tôi đã dành rất nhiều thời gian tìm kiếm và những gì tôi tìm thấy cho đến nay là sử dụng html5 canvas, javascript và ajax.

Chỉ có thư viện tôi đã sử dụng là thư viện javascript jQuery nhưng nó là tùy chọn. Có thể dễ dàng viết lại mã để sử dụng javascript thuần túy.

Làm thế nào nó hoạt động:

1) js lấy dữ liệu từ ajax.php trả về một mảng tất cả các tệp

2) js sau đó lặp qua danh sách tệp và thực hiện change(src,color)cho từng mục

3) Hàm js change(src,color)tải hình ảnh từ nguồn, thay thế màu của nó và thêm một phần tử img vào #Cellvà hiển thị nó (để gỡ lỗi).

4) change()cũng gọi save(src,filename,cname)hàm 5) hàm js save(src,filename,cname)gửi một yêu cầu ajax với dữ liệu hình ảnh và ajax.phplưu hình ảnh vào máy chủ.

Vì vậy, đây là mã:

ajax.php

index.php (chỉ html)

        

    
    



    
    
    Change

demo.js

$(document).ready(function() {
    $(document).on("click","#doit",function() {
        var c = $("#color");
        if(c.val() != "") {
            $("#Cell").html("");
            $.post("ajax.php",{ action: "get_all" },function(s) {
                var images = $.parseJSON(s);
                $.each(images, function(index, element) {
                    change(images[index], c.val());
                });
            });
        }
    });
});
function change(src,color) {
    var myImg = new Image();
    myImg.src = "img/"+src;
    myImg.onload = function() {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(myImg,0,0);
        var imgd = ctx.getImageData(0, 0, myImg.width, myImg.height);
        canvas.height = myImg.height;
        canvas.width = myImg.width;
        var new_color = HexToRGB(color);
        // console.log(imgd)
        for (i = 0; i >> 16) & 0xff,
        G: (Long >>> 8) & 0xff,
        B: Long & 0xff
    };
}

Tôi đã thử nghiệm nó, để tô màu lại và lưu 420 hình ảnh 24x24, mất chưa đến 10 giây (trên localhost) (420 lệnh gọi ajax async). Sau khi hình ảnh gốc được lưu vào bộ nhớ đệm, nó sẽ hoàn thành nhanh hơn nhiều. Chất lượng hình ảnh vẫn như ban đầu.

Một lần nữa, giải pháp này là dành cho mục đích sử dụng cá nhân của tôi nên mã khá không được quản lý và tôi chắc chắn rằng nó có thể được cải thiện nhưng bạn xem - như hiện tại, nó hoạt động.

1 hữu ích 0 bình luận chia sẻ