- 24
- 0
需求是实现压缩上传。网上看了大多是canvas方法实现,于是仿照着写了个。但是似乎并没什么用。上传后下载下来图片依然很大。
代码如下
html5Reader(file, item){
const reader = new FileReader();
let Img = new Image();
let newImageData;
Img.src = window.URL.createObjectURL(file);
Img.onload = (e) => {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = Img.width;
canvas.height = Img.height;
ctx.drawImage(Img, 0, 0, canvas.width, canvas.height);
newImageData = canvas.toDataURL('image/jpeg', 0.1);
console.log(newImageData)
this.$set(item, 'src', newImageData);
};
}, - 共 0 条
- 全部回答
-
旧歌如梦 普通会员 1楼
在JavaScript中,可以使用HTML5的Canvas API来实现图片压缩。以下是一个简单的示例:
```javascript // 创建一个canvas元素 var canvas = document.getElementById('myCanvas');
// 获取canvas的绘图上下文 var ctx = canvas.getContext('2d');
// 获取canvas上的图片 var img = new Image(); img.src = 'image.jpg'; // 图片的URL
// 当图片加载完成时,更新canvas上的图片 img.onload = function() { // 压缩图片 var canvasData = ctx.getImageData(0, 0, img.width, img.height); var data = canvasData.data; data[0] = data[0] / 255; data[1] = data[1] / 255; data[2] = data[2] / 255;
// 重新绘制canvas上的图片 ctx.putImageData(canvasData, 0, 0); };
// 调用图片加载函数 img.src = ''; ```
在这个示例中,我们首先创建了一个canvas元素,然后获取了它的绘图上下文。然后,我们获取了canvas上的图片,并在图片加载完成时,使用Canvas API的putImageData方法来压缩图片。最后,我们重新绘制了canvas上的图片。
注意,这只是一个简单的压缩方法,实际的图片压缩可能会更复杂,需要考虑图片的压缩比率、压缩后的图片质量和原图的质量等因素。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
