学堂学堂学堂公众号手机端

使用Canvas的drawImage方法可以实现图片的压缩

lewis 2年前 (2023-11-13) 阅读数 6 #技术

使用Canvas的drawImage方法可以实现图片的压缩。下面是一个简单的示例代码：

//获取原始的图片对象
varimg=newImage();
img.src='原始图片路径';

//创建一个Canvas元素
varcanvas=document.createElement('canvas');
varctx=canvas.getContext('2d');

//设置Canvas的大小为压缩后的尺寸
varmaxWidth=200;
varmaxHeight=200;
varratio=1;
if(img.width>maxWidth||img.height>maxHeight){
ratio=Math.min(maxWidth/img.width,maxHeight/img.height);
}

canvas.width=img.width*ratio;
canvas.height=img.height*ratio;

//在Canvas上绘制压缩后的图片
ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);

//将Canvas转换为压缩后的图片数据
varcompressedImage=canvas.toDataURL('image/jpeg',0.7);

//将压缩后的图片显示在页面上
varcompressedImgElement=document.createElement('img');
compressedImgElement.src=compressedImage;
document.body.appendChild(compressedImgElement);

在上面的代码中，首先创建一个原始的图片对象，然后创建一个Canvas元素，并设置Canvas的大小为压缩后的尺寸。接着使用drawImage方法在Canvas上绘制压缩后的图片，最后将Canvas转换为压缩后的图片数据，并将其显示在页面上。

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：在Java中，close方法用于关闭一个实现了Closeable或AutoCloseable接口的资源，例如文件、网络连接、数据库连接等下一篇：在Spark中，流式处理通常使用DStream（离散流）来表示连续的数据流。为了保证数据的一致性和准确性，Spark提供了以下机制