利用 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

时间: 2024-10-29 19:29:01

利用 canvas 实现压缩图片的相关文章

canvas前端压缩图片

参考网上的用法,下面是利用canvas进行的图片压缩 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta c

[H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现

// 还存在有问题的代码,问题在于processFile()中// 问题:在ipone 5c 下,某些图片压缩处理后,上传到服务器生成的文件size为0,即是空白 ;define(['mod/tool/formSubmit'] ,function(o_formSubmit) { return { init: function(id) { var self = this; self.sniff(id); var $img = ''; var $inputField = ''; }, sniff:

Android学习之利用BitmapFactory工厂压缩图片

BufferedInputStream in = new BufferedInputStream( new FileInputStream(new File(path))); BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = false; options.inSampleSize = 2;//宽和高变为原来的1/2,即图片压缩为原来的1/4 Bitmap bitmap

js 利用canvas 生成文字图片

// text,需要生成的文字 // font,字体样式 drawLogo: function(text, font) { // 创建画布 let canvas = document.createElement('canvas'); // 绘制文字环境 let context = canvas.getContext('2d'); // 设置字体 context.font = font; // 获取字体宽度 let width = context.measureText(text).width;

canvas压缩图片

1.canvas.toDataUrl压缩图片 canvas的toDataUrl方法可以将内容导出为base64编码格式的图片,采用base64编码将比源文件大1/3,但是该方法可以指定导出图片质量,所以前端可实现上传图片的压缩.先通过fileApi拿到本地图片地址,然后新建一个Img元素,图片绘制到canvas中后再将其导出(压缩).例如: $(':file').on('change',function(){         var file = this.files[0];         v

【canvas】 使用canvas压缩图片大小

------------恢复内容开始------------ 由于各种大大小小的原因,自己最近经历了一些面试,其中有一个面试题是这样的,使用canvas怎样压缩图片大小 这道题给我问蒙了,因为我没用过canvas压缩图片 回去查资料,发现手机端在上传图片的时候,调起相机拍照的时候超过2m了,所以用到canvas压缩,优化用户体验 解决方法: 1. 将图片的file文件转成baseURL 2. 创建一个image表情去接受文件获取图片的宽高和比例. 3. 创建canvas画布设置画布的大小. 4.

前端JS利用canvas的drawImage()对图片进行压缩

对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 2.最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像,就会遇

ios系统 竖屏拍照 canvas处理后 图片旋转(利用exif.js解决ios手机上传竖拍照片旋转90度问题)

转:https://www.cnblogs.com/lovelgx/articles/8656615.html ---恢复内容开始--- 问题:html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 解决方法:利用exif.js解决ios手机上传竖拍照片旋转90度问题 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见 htt

CANVAS运用-对图片的压缩上传(仅针对移动浏览器)

最近在移动端设计头像上传功能时,原本是以<input type="file">直接通过formData上传,然而实际使用情况是:对于过大的图片(高像素手机所拍摄的照片等)上传时间过长会导致上传失败,而每次都上传原始大小的图片(后台处理压缩)十分影响用户体验,所以研究了一下通过canvas压缩图片并上传的方法,以下是整理的一些思路和心得: 一.<input type="file">获取本地图片,并将图片绘制到画布中.此处的难点在于:由于浏览器的