利用 canvas 实现压缩图片

/**
 *  nase64Data --> 要压缩的图片base64数据
 *  width --> 宽度
 *  height --> 高度
 *  _callback --> 回调函数
 */
function getCompressImage(base64Data, width, height, _callback) {
    var oldimg = new Image();
    oldimg.src = base64Data;
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    oldimg.onload = function() {
        console.log('原始宽:' + oldimg.width + "原始高:" + oldimg.height);
        // 绘制
        context.drawImage(oldimg, 0, 0, width, height);
        // 新的base64数据(压缩后的数据)
        var newBase64 = canvas.toDataURL();
        return _callback(newBase64);
    }
}

 

转载于:https://www.cnblogs.com/oukele/p/11177661.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以参考下面的代码:// 定义压缩参数 var quality = 0.5; // 获取图片节点 var imageNode = document.getElementById('image'); // 获取图片的base64编码 var imageData = imageNode.toDataURL("image/jpeg", quality); // 将base64数据字符串转换为Blob var blob = dataURItoBlob(imageData); // 将Blob传输到服务器 var formData = new FormData(); formData.append('file', blob); // 创建Ajax请求 var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.send(formData); ### 回答2: 图片压缩是一种在前端开发中常用的技术,可以减小图片的体积,提高网页加载速度。下面是使用JavaScript来实现图片压缩的代码: ```javascript function compressImage(file, maxWidth, maxHeight, quality) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = function(event) { const img = new Image(); img.onload = function() { let width = img.width; let height = img.height; // 根据最大宽度和高度进行等比例缩放 if (width > height) { if (width > maxWidth) { height *= maxWidth / width; width = maxWidth; } } else { if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } } // 创建canvas对象并设置宽高 const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; // 使用canvas绘制图像 const context = canvas.getContext('2d'); context.drawImage(img, 0, 0, width, height); // 将canvas图像转换为base64格式 const base64 = canvas.toDataURL('image/jpeg', quality); // 返回压缩后的图片 resolve(base64); }; img.src = event.target.result; }; reader.readAsDataURL(file); }); } // 使用示例 const fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', async event => { const file = event.target.files[0]; const compressedImage = await compressImage(file, 800, 600, 0.75); // 在此处处理压缩后的图片 // compressedImage为压缩后的base64格式图片数据 }); ``` 以上代码将通过`compressImage`函数接收一个图片文件,最大宽度、最大高度和压缩质量作为参数。然后利用`FileReader`读取图片文件,使用`Image`对象获取图片的实际宽高。根据指定的最大宽度和高度进行等比例缩放,并使用`canvas`的`drawImage`方法绘制压缩后的图片。最后将`canvas`图像转换为`base64`格式,返回压缩后的图片数据。 在使用示例中,你可以通过`fileInput`元素监听文件选择的`change`事件,获取选择的图片文件,并调用`compressImage`函数进行图片压缩。在得到压缩后的图片后,你可以在相应的位置再进行其他的处理操作。 ### 回答3: 图片压缩是一种常见的前端开发需求,可以通过JavaScript编写一段代码来实现。下面给出一个简单的图片压缩代码示例。 首先,我们需要获取用户选择的图片文件。可以使用HTML的<input type="file">元素来实现。然后在JavaScript中获取选中的文件,使用FileReader读取文件数据。 接下来,我们将读取的图片数据转换为图片对象,并创建一个Canvas元素。通过设置Canvas的宽度和高度,可以调整图片的尺寸。 然后,将图片绘制到Canvas上,并将Canvas转换为Base64编码的图像数据。Base64编码可以将图片数据转换为文本格式,方便传输和展示。 最后,我们可以通过设置Canvas的toDataURL()方法的第一个参数为图片格式(如'image/jpeg')和第二个参数为图片质量(0-1之间的数值)来进行图片压缩。通常,较低的质量会导致更高的压缩率但图片质量会降低。 下面是一段示例代码: ```javascript // 获取用户选择的图片文件 const inputElement = document.querySelector('input[type="file"]'); inputElement.addEventListener('change', handleFile, false); function handleFile(e) { const file = e.target.files[0]; // 读取文件数据 const reader = new FileReader(); reader.onload = function(e) { const img = new Image(); img.onload = function() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 调整图片尺寸 canvas.width = 800; // 设置Canvas的宽度 canvas.height = canvas.width * (img.height / img.width); // 根据图片宽高比例设置Canvas的高度 // 在Canvas上绘制图片 ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 将Canvas转换为Base64编码的图像数据 const compressedImage = canvas.toDataURL('image/jpeg', 0.8); // 设置图片格式为JPEG,质量为0.8 // 在控制台打印压缩后的图片数据 console.log(compressedImage); }; img.src = e.target.result; }; reader.readAsDataURL(file); } ``` 这段代码实现了基本的图片压缩功能,并将压缩后的图片数据打印到了控制台。你可以根据实际需求进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值