JavaScript使用基于64位编码的代码来减小图像的大小和质量 [英] JavaScript reduce the size and quality of image with based64 encoded code
本文介绍了JavaScript使用基于64位编码的代码来减小图像的大小和质量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个基于图像的64位编码代码。现在我想减小图像的大小和质量。如何在JavaScript或jQuery中执行此操作？
I have the based64 encoded code of an image. Now I want to reduce the size and quality of the image. How can I do this in JavaScript or jQuery?
这里解析的是工作代码：Index.php
这是javascript代码哪个适合我？
Resolve here is the working code : Index.php Here is javascript code which worked form me
<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, 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, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
// the method signature you are using is for slicing
ctx.drawImage(canvasCopy, 0, 0, canvas.width, 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。
You can use canvas, put image into it, scale it and get image src with new base64 code.
这是执行该操作的函数，它返回promise对象，因为在绘制画布之前需要首先加载（缓存）图像它的编码src。
Here's the function doing that, it returns promise object, as image needs to be loaded (cached) first before drawing canvas out of it and getting its encoded 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
这篇关于JavaScript使用基于64位编码的代码来减小图像的大小和质量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
