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

我有一个图像的based64编码的代码.现在我想减少图像的大小和质量.如何在 JavaScript或jQuery中执行此操作？

解决这里是工作代码：Index.PHP
这是从我工作的JavaScript代码

<html>
<head>
<title>JavaScript Image Resize</title>
<Meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
body {
    font-size: 16px;
    font-family: Arial;
}

</style>
<script type="text/javascript">
function _resize(img,maxWidth,maxHeight) 
{
    var ratio = 1;
    var canvas = document.createElement("canvas");
    canvas.style.display="none";
    document.body.appendChild(canvas);

    var canvascopy = document.createElement("canvas");
    canvascopy.style.display="none";
    document.body.appendChild(canvascopy);

    var ctx = canvas.getContext("2d");
    var copyContext = canvascopy.getContext("2d");

        if(img.width > maxWidth)
                ratio = maxWidth / img.width;
        else if(img.height > maxHeight)
                ratio = maxHeight / img.height;

        canvascopy.width = img.width;
        canvascopy.height = img.height;
try {
        copyContext.drawImage(img,0);
} catch (e) { 
    document.getElementById('loader').style.display="none";
    alert("There was a problem - please reupload your image");
    return false;
}
        canvas.width = img.width * ratio;
        canvas.height = img.height * ratio;
        // the line to change
        //ctx.drawImage(canvascopy,canvascopy.width,canvascopy.height,canvas.width,canvas.height);
        // the method signature you are using is for slicing
        ctx.drawImage(canvascopy,canvas.height);
        var dataURL = canvas.toDataURL("image/png");
        document.body.removeChild(canvas);
        document.body.removeChild(canvascopy);

        return dataURL.replace(/^data:image\/(png|jpg);base64,/,"");


};

function resize() { 
    var photo = document.getElementById("photo");

    if(photo.files!=undefined){ 
        var loader = document.getElementById("loader");
        loader.style.display = "inline";
        var file  = photo.files[0];
        document.getElementById("orig").value = file.fileSize;
        var preview = document.getElementById("preview");
        var r = new FileReader();
        r.onload = (function(previewImage) { 
            return function(e) { 
                var maxx = 500;
                var maxy = 500;
                previewImage.src = e.target.result; 
                var k = _resize(previewImage,maxx,maxy);
                if(k!=false) { 
                document.getElementById('base64').value= k;
                document.getElementById('upload').submit();
                } else {
                alert('problem - please attempt to upload again');
                }
            }; 
        })(preview);
        r.readAsDataURL(file);
    } else {
        alert("Seems your browser doesn't support resizing");
    }
    return false;
}

</script>
</head>
<body>

<div align="center">
<h2>Image Resize Demo</h2>

    <input type="file" name="photo" id="photo">
    <br> 
    <br>    
    <input type="button" onClick="resize();" value="Resize">
    <img src="loader.gif" id="loader" />
    <img src="" alt="Image preview" id="preview">
   <form name="upload" id="upload" method='post' action='show.PHP'>
        <textarea name="base64" id="base64" rows='10' cols='90'></textarea>
        <input type="hidden" id="orig" name="orig" value=""/>
   </form>
</div>

</body>
</html>

Show.PHP 文件

<html>
<head>
<title>JavaScript file upload</title>
<Meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
body {
    font-size: 16px;
    font-family: Arial;
}
#preview {
    display:none;
}
#base64 {
    display:none;
}
</style>
</head>
<body>
<?PHP
$base64size = strlen($_POST['base64']);
$f = base64_decode($_POST['base64']);
$name = microtime(true).".png";
file_put_contents("./$name",$f);
#header("Content-type: image/png");
#header("Content-disposition: attachment; filename=\"shrunk.png\"");
#echo $f;
#die();
?>
<h2>Shrunk file</h2>
<p>Original file was: <?=$_POST['orig'];?> bytes</p>
<p>Transmitted size was: <?=$base64size;?> bytes (due to base64)</p>
<p>New file is: <?=filesize("./$name");?> bytes</p>
<p><img src="<?=$name;?>"/></p>
</body>
</html>

解决方法

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

这是这样做的功能,它返回promise对象,因为在绘制画布并获取其编码的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); 
        deferred.resolve($("<img/>").attr("src",canvas.toDataURL()));               
    });
    return deferred.promise();    
}

可以这样使用：

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

这是jsfiddle

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

解决方法

相关文章