前端用canvas 对图片进行压缩

2024-11-03

基于canvas的前端图片压缩

/*common*/ /** * canvas图片压缩 * @param {[Object]} opt [配置参数] * @param {[Function]} cbk [回调函数] * @return {[Void]} * example: * var opt = { 'type' : 1,//为1为预览,建议不为1或后期进行改进 'file' : "#loadFile"//文件上传控件 },_compress = require('app/compress'); _compress

上传图片如何对图片进行压缩canvas

前言:哈喽,朋友们,最近一直在马不停蹄地赶项目,很久没有写博客了.今天我们来看一下前端上传图片地时候如何对图片进行压缩 1.图片上传我近期写项目都是使用的VUE,这里上传图片使用了Element-ui这个组件库具体代码如下: <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false&q

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

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

上传图片时压缩图片 - 前端（canvas）做法

HTML前端代码: <?php $this->layout('head'); ?> <?php $this->layout('sidebar'); ?> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type=

前端通过canvas实现图片压缩

在一次的项目中,需要用户上传图片,目前市场随便一个手机拍出来的照片都是好几兆,直接上传特别占用带宽,影响用户体验,所以要求对用户上传图片进行压缩后再上传:那么前端怎么实现这个功能呢? 亲测可将4M图片压缩至100kb左右,代码如下: <input id="file" type="file"> <script type="text/javascript"> var eleFile = document.querySelect

使用HTML5的两个api，前端js完成图片压缩

主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交. 照片是自己用单反拍的,5M多,压缩下面3张分别是600多kb,400多kb,300kb的最后那张失真度很大了,压缩效率蛮高的. .....(代码请查看原文) 阅读原文:使用HTML5的两个api,前端js完成图片压缩

前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

前端自动化(三) 合并压缩css.压缩js.添加时间戳.打包上线操作此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ return del("./dist/") console.log("delete is end");});译:删除不需要的gulp.task("copyHtml",function(){ return gulp.src("./dev/*.h

利用HTML5，前端js实现图片压缩

http://blog.csdn.NET/qazwsx2345/article/details/21827553 主要用了两个HTML5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交. 照片是自己用单反拍的,5M多,压缩下面3张分别是600多kb,400多kb,300kb的最后那张失真度很大了,压缩效率蛮高的. <!DOCTYPE html> <html> &l

利用canvas对图片进行切割

使用input标签选择一张图片, 然后利用canvas对图片进行切割, 可以设置切割的行数和列数这是html代码 ... <input type="file" id="input"> ... 这是js代码 class SplitImage { constructor (options) { this.options = { col: 3, row: 3, inputEle: '' } this.options = Object.assign({}, t

前端基于Canvas生成等值面的方案

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景在之前的项目中,我们做过基于PM2.5的站点监测数据对全区域进行插值渲染来可视化预测,其实现方案为后台工具进行定时生成插值栅格图,对应文章为:<WebGIS中等值面展示的相关方案简析>(http://www.cnblogs.com/naaoveGIS/p/6145339.html).但是该方案依赖AE,且为定时生成等值面(也可以改造为实时,但是因为是工具类型

vue开发中vue-resource + canvas 图片压缩、上传、预览

1.使用vue-resource上传,也可以自定义ajax上传: 2.使用<input type="file" @change="submit()" name="multipart" class="element" accept="image/*" id="headerImage">标签,在submit的时候执行方法 3.正式代码 let oFiles = document

js canvas图片压缩

canvas处理压缩照片并回显：https://cengjingdeshuige.oss-cn-beijing.aliyuncs.com/20180512/cannovs%E5%AD%A6%E4%B9%A0.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

移动前端框架,require.js压缩

static css images 不同的页面可以新建不同的图片文件夹(可选) js libs 前端类库 plugs 插件 views 自己写的代码文件 sass/less libs 前端类库 plugs 插件 layout 模板文件 static css images script tools r.js build.js index.html { appDir: "../script", baseUrl: "../script&

前端使用canvas绘制立体三角形

前端绘制立体效果的三角形的demo 在移动端使用时,需要自适应屏幕.canvas上无法设置rem,所以在canvas外加一个父级元素设置为rem,再将canvas的宽高设置为100% 100%. 如果想出现立体效果,应该将一个三角形分为三个三角形来进行绘制. 突出立体的效果,应该设置过渡色. toTriangle(a,b,c){ //a为左边三角的长度,b为顶点距离中心的长度,c为右边顶点距离中心的长度 var bg = document.getElementById('circle_t

canvas图片压缩，局部放大，像素处理

直接上代码:(具体看注释) 需要引用jquery.min.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv

前端图片canvas，file，blob，DataURL等格式转换

将file转化成base64 方法一:利用URL.createObjectURL() <!DOCTYPE html> <html> <head> <title>base</title> </head> <body> <input type="file" name="" id="file"> <img src="" id=&qu

前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安装全局安装 $ npm install gulp -g 进入项目跟目录,初始化 npm init , 然后安装: $ npm install gulp 安装插件 sass的编译(gulp-ruby-sass) 自动添加css前缀(gulp-autoprefixer) 压缩css(gulp-clea

利用 canvas 实现压缩图片

/** * nase64Data --> 要压缩的图片base64数据 * width --> 宽度 * height --> 高度 * _callback --> 回调函数 */ function getCompressImage(base64Data, width, height, _callback) { var oldimg = new Image(); oldimg.src = base64Data; var canvas = document.createElement

前端使用canvas生成盲水印的加密解密

为了保障信息安全,防止重大信息泄露,并且能够锁定泄露用户,需要对页面展示的图片加入当前用户信息的盲水印,即最终图片外观看起来和原图一样,但是经过解码以后可以识别出水印信息,并且在截图后仍能进行较好的识别. 经过在网上的学习摸索,看了几位大神的博客以后,我也总结一下自己的代码,分享一下学习经验. 我们将使用以下图片作为原图进行示范: 下面是图片添加盲水印的代码: <script> var canvas = document.getElementById("myCanvas")

vue文件上传及压缩（canvas实现压缩）

// 读取文件结果 afterRead(files) { let that = this; let file = files.file; if (file === undefined) { return; } if (file.size / 1024 > 1025) { // 文件大于1M(根据需求更改),进行压缩上传 this.photoCompress( file, { // 调用压缩图片方法 quality: 0.2, }, function (base64Codes) { // cons

前端用canvas 对图片进行压缩

热门专题