微信小程序：利用canvas缩小图片

最新推荐文章于 2024-07-31 17:04:18 发布

Akony

最新推荐文章于 2024-07-31 17:04:18 发布

阅读量1.2w

点赞数 1

分类专栏：小程序文章标签：微信图片 canvas

本文链接：https://blog.csdn.net/Akony/article/details/78815544

版权

微信小程序中，为了提高接口响应速度和避免大图片处理，采用canvas进行图片压缩。通过canvas的drawImage方法重新设定图片尺寸，再利用canvasToTempFilePath方法将压缩后的图片保存，从而实现图片的高效压缩并展示。

摘要由CSDN通过智能技术生成

功能分两部分：展示、提交
一期的时候，用户预览图片，直接提交到后台。但是发现如果图片太大，还要进行二次处理，还会降低接口相应速度等原因。所以要对图片进行压缩。

压缩原理：选择图片后，利用canvas的drawImage方法重新定义图片大小，再利用canvasToTempFilePath方法下载到缩小后图片。

// 利用绝对定位 隐藏canvas
<canvas canvas-id="photo_canvas" style="width:{
   {
   canvasWidth}}px;height:{
   {
   canvasHeight}}

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Akony

关注关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Canvas 压缩图片

小鸭子的博客

08-03

270

1、场景我们上传图片时，图片如果过大，耗费流量，会要求前端压缩，正常的我们选择好图片时，会拿到这种图片类型，一种是base64,一种是file，我们是不管是那种，最终传给后端的话，一般都会是流，因为base64字符太长了，一般不建议使用。原理就是拿到图片绘制在canvas上，然后canvas转换为base64的图片（如果需要base64，后面不用再转为file），然后在转换成file返回第一种，file压缩之后为file /** * 图片压缩 */ export function picReduc

wx 小程序基于canvas压缩图片

黄彪博客

10-30

822

文章目录文章参考选择图片，显示在canvas中微信小程序压缩图片文章参考 微信小程序等比例图片压缩上传，100%可用，非官方压缩方法选择图片，显示在canvas中 <canvas style="width: 100px; height: 150px;border: 1px solid red;" canvas-id="firstCanvas"></canvas> &...

3 条评论您还未登录，请先登录后发表或查看评论

微信小程序实现本地图片压缩

热门推荐

qq_39404437的博客

08-06

2万+

1、canvas略解林大大又来更新啦~这次主要做的是关于canvas图像绘制的部分，要实现的功能主要是绘制、对canvas的放大以及那我们先来大概了解下canvas：1、canvas略解宽高是必须加上的，当然你也可以选择动态宽高，可以设置宽高百分比喔，canvas用于在页面上绘制图像（可以是自己的图片，也可以绘制自定义矢量图形：矩形等），其实我们不用担心大量的重绘canvas，现在浏览器完全扛得住这压力，非常流畅丝滑。

canvas图形缩放功能

m0_37573249的博客

01-07

3019

在实现缩放功能之前，我们无非需要考虑的是图形中心点的位置确定问题，在默认状态下不论是原点还是中心点均在画布的左上角位置，在不改变原点坐标的情况下对图形进行位移操作以实现缩放后确立中心点的位置。业务场景当我们在画布中以鼠标的指针作为中心点对画布上的图形进行缩放时，在鼠标指针的中心点位置不变的情况下对图形进行缩放，以scale为缩放系数进行横纵坐标等比缩放，其中x,y为某个浮点数(浮点数越小缩放越平滑)，在缩放系数中存在一个缩放增量step的概念，所谓缩放增量是指每一个缩放较上一次增加了多...

canvas 缩放/拖动/还原/封装和实例--开箱即用

iamlujingtao的博客

08-13

4030

canvas 缩放/拖动/还原/封装和实例一、预览二、使用2.1 创建和配置2.2 方法三、重点说明3.1 配置里有2个宽高设置3.2 分开设置事件四、源码一、预览最近需要用到canvas的缩放、拖动、还原等操作，网上有些资料，但用起来都不太方便，自己重新写了一个操作类，能满足上述使用情况，而且用起来很方便，也很灵活，画布尺寸和css尺寸不一致情况也考虑到，拖动支持触摸和鼠标。效果如下：二、使用 2.1 创建和配置 // 创建对象并进行配置 var canvas = new CanvasOpe

微信小程序：实现canvas绘制地图及简单拖动

03-17

本篇文章将聚焦于如何利用Canvas在微信小程序中绘制地图，并实现简单的拖动功能。以下是对这个主题的详细阐述：首先，我们需要了解微信小程序中的Canvas组件。在微信小程序中，Canvas可以通过`<canvas>`标签引入，...

微信小程序canvas实现文字缩放

01-12

综上所述，实现微信小程序canvas的文字缩放主要涉及`setFontSize`方法的使用以及事件监听来动态调整字体大小。通过熟练掌握canvas API，开发者可以在微信小程序中构建出各种炫酷的图形和动画效果，提升用户体验。

微信小程序简单的canvas裁剪图片功能详解

10-16

微信小程序的canvas裁剪图片功能可以让开发者在小程序中实现图片的裁剪操作，适用于需要图片处理的各种场景，比如用户头像编辑、图片分享等。在微信小程序中，Canvas API提供了丰富的绘图接口，可以帮助开发者绘制...

微信小程序canvas实现椭圆（圆形）缩放

01-09

在微信小程序中，Canvas是用于绘制...通过理解以上知识点，开发者可以在微信小程序中实现一个能够动态缩放的Canvas椭圆（圆形）功能。这不仅展示了Canvas的强大绘图能力，也体现了微信小程序对交互和动画的良好支持。

小程序中上传图片并进行压缩（二）

浮萍的博客

08-29

9504

上一篇文章说了，一些简单的小程序上传的内容，我在这纠正下错误，那个只是上传到页面，在页面上把图片缩小了，显示在页面上，那个连接还是可以传的，但真正的压缩并没有实现，今天说下另外一种压缩方法，上一张图让大家看的直白些。这里就不让他去选择菜单了，不会的话请看上一篇文章（选择是拍照还是本地），这里上传图片直接进入到本地去获取还是上代码，里面都有一些我自己理解的注释 var u...

小程序利用canvas实现一键保存图片功能（合并图片，双指缩放，旋转，默认裁剪画布大小的尺寸）

qq_26387907的博客

12-21

2524

**css ** .container { position: relative; width: 100%; height: 100%; background: #000; } .img { position: absolute; top: 5%; left: 50%; transform: translateX(-50%); overflow: hi...

微信小程序内实现图层的移动、缩放、旋转等其他编辑操作

不怕麻烦的鹿丸的博客

07-03

3884

图层有3种1、不可操作，只能替换，不可改变层级（最底层）2、可移动，缩放（支持双指缩放），旋转，可改变层级3、可移动，缩放（会改变文字大小，支持双指缩放），旋转，文字编辑区域拉伸长度和宽度（不会改变文字大小），可编辑更改文字属性（内容，字体大小，字体颜色，描边大小，描边颜色，编辑框背景色），可改变层级我们以720*1280的设计图为准，先获取设备上编辑区域的尺寸（实际宽高的像素），然后用编辑区域的宽高和设计图的宽高，就可以得出它们之间的dpi，之后就可以用这个dpi进行转换。

微信小程序使用canvas进行图片压缩

weixin_43931617的博客

04-27

1222

由于项目需求，微信提供的wx.chooseImage方法中的压缩参数不能达到效果，里面的sizeType参数，就算选择compressed，也无法达到效果，我发现只有图片超过一定的大小才会被压缩，这个大小是多大暂时不明确，后来经过度娘找到了使用canvas来进行压缩，本次作为一个记录。因为图片上传涉及到多个地方，就封装成了公共方法，以每次选择一张为例(服务器需要存储的是base64的格式，所以需要转换)，如果是选择多张，图片就需要循环去执行压缩操作： public.js// 上传图片前的处理，获得图片的.

小程序canvas 缩放/拖动/还原/封装和实例--开箱即用

iamlujingtao的博客

12-12

6171

之前写过web端的canvas 缩放/拖动/还原/封装和实例。最近小程序也需要用到，但凡是涉及小程序canvas还是比较多坑的，而且难用多了，于是在web的基础上重新写了小程序的相关功能。

微信小程序开发图片压缩解决办法

u013776700的博客

08-01

4295

微信小程序开发，canvas, 图片压缩，uniapp