JavaScript使用基于64位编码的代码来减小图像的大小和质量

Question

问

JavaScript使用基于64位编码的代码来减小图像的大小和质量

mobiledu2502862707 发布于 2023-02-12 20:02

我有一个基于图像的64位编码代码.现在我想减小图像的大小和质量.我怎么能用JavaScript或jQuery做到这一点？

这里解决的是工作代码:Index.php 这是我的javascript代码



JavaScript Image Resize







Image Resize Demo

Show.php文件

JavaScript file upload

Shrunk file

Original file was: bytes

Transmitted size was: bytes (due to base64)

New file is: bytes

paulitto.. 31

您可以使用canvas,将图像放入其中,缩放它并使用新的base64代码获取图像src.

这是执行该操作的函数,它返回promise对象,因为在将canvas绘制出来并获取其编码的src之前,首先需要加载(缓存)图像.

function resizeBase64Img(base64, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext("2d");
    var deferred = $.Deferred();
    $("").attr("src", "data:image/gif;base64," + base64).load(function() {
        context.scale(width/this.width,  height/this.height);
        context.drawImage(this, 0, 0); 
        deferred.resolve($("").attr("src", canvas.toDataURL()));               
    });
    return deferred.promise();    
}

可以像这样使用:

resizeBase64Img(oldBase64, 100, 100).then(function(newImg){
    $("body").append(newImg);
});

这是jsfiddle

1 个回答

您可以使用canvas,将图像放入其中,缩放它并使用新的base64代码获取图像src.

这是执行该操作的函数,它返回promise对象,因为在将canvas绘制出来并获取其编码的src之前,首先需要加载(缓存)图像.

function resizeBase64Img(base64, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext("2d");
    var deferred = $.Deferred();
    $("<img/>").attr("src", "data:image/gif;base64," + base64).load(function() {
        context.scale(width/this.width,  height/this.height);
        context.drawImage(this, 0, 0); 
        deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));               
    });
    return deferred.promise();    
}

可以像这样使用:

resizeBase64Img(oldBase64, 100, 100).then(function(newImg){
    $("body").append(newImg);
});

这是jsfiddle

2023-02-12 20:07 回答

shanshanhongxing

撰写答案