这期内容当中小编将会给大家带来有关怎么在html5中使用canvas压缩图片,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
在成都网站建设、成都做网站过程中,需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析,以确定网站的风格、色彩、版式、交互等方面的设计方向。成都创新互联还需要根据客户的需求进行功能模块的开发和设计,包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。
知识点:
canvas 的 toDataURL('image/png', 0.9) ; 把 canvas 画的图片转换为 base64,第一个参数表示的是图片的类型,第二个参数表示的是图片的清晰度。
规定一个最大尺寸,如果图片本身的宽高大于这个尺寸,按照最大的一个边进行缩放,另一个根据图片的 比例 进行设置,然后设置给 canvas .
miniImage.js
export default async function miniSize(imgData, maxSize = 200*1024){ // const maxSize = 200 * 1024; if(imgData && imgData.files && imgData.files.size < maxSize) { return imgData.url; }else{ console.log('----------------压缩图片-------------------'); const canvas = document.createElement('canvas'); let img = new Image(); img.src = imgData.url; let ctx = canvas.getContext('2d'); return new Promise((resolve =>{ img.addEventListener('load', function(){ //图片原始尺寸 let originWidth = this.width; let originHeight = this.height; // 最大尺寸限制 let maxWidth = 400, maxHeight = 400; // 目标尺寸 let targetWidth = originWidth, targetHeight = originHeight; // 图片尺寸超过400x400的限制 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // 更宽,按照宽度限定尺寸 targetWidth = maxWidth; targetHeight = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); } } canvas.width = targetWidth; canvas.height = targetHeight; ctx.drawImage(img, 0, 0, targetWidth, targetHeight); let base64 = canvas.toDataURL('image/png', 0.9); resolve(base64); }, false); })) } }
调用:
test.js
onChangeImg = async (files, type, index) => { let previous = this.props.imagePicker.files; if(type === "add") { let result = miniSize(files[files.length-1]); //使用 .then() 调用获得结果 await result.then(res => { previous.push({url: res}); }); }else if(type === "remove") { previous.splice(index,1); } await this.props.dispatch({ type: 'imagePicker/saveImage', payload: { files: previous } }) }
上述就是小编为大家分享的怎么在html5中使用canvas压缩图片了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。
新闻标题:怎么在html5中使用canvas压缩图片
网页路径:https://www.cdcxhl.com/article28/pgdccp.html
成都网站建设公司_创新互联,为您提供定制网站、定制开发、外贸网站建设、品牌网站建设、云服务器、App设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联