我有一个基于图像的64位编码代码.现在我想减小图像的大小和质量.我怎么能用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, 0); …Run Code Online (Sandbox Code Playgroud) 根据文档:
所述HTMLCanvasElement.toDataURL()方法返回包含在由所述类型参数(默认为PNG)指定的格式的所述图像的表示的数据URI。返回的图像的分辨率为96 dpi。
不涉及打印时如何参考打印分辨率?
我写了一个jsfiddle,它在画布上绘制图像,然后调用toDataURL()。毕竟,似乎最终图像的质量没有受到影响。
我不明白96 dpi在文档中是什么意思。有什么想法吗?
var image = new Image();
image.crossOrigin = "Anonymous";
image.src = "...";
// ...
var dataURL = canvas.toDataURL('image/jpeg', 1.0);
window.open(dataURL);
Run Code Online (Sandbox Code Playgroud)