html resize 最小,Html5 Canvas resize

问题

Am using canvas to resize image at the client side and then upload that image to the server. My intention was to resize the image to half of its original dimensions and wanted to see a decrease in the file size. But the resized image size is always greater than the original.

For example,

I was resizing a 2.5 MB JPEG image file with dimensions 2592 x 1936 to 1296 x 968 (JPEG file) and tried to upload it to the server. On the server I see that the file is saved with the 3.5 MB size.

Is there something that we can do while resizing with html5 canvas so that if we are decreasing the dimensions we could expect some decrease in the file size like compression.

回答1:

If you are using toDataURL, you can set the second argument to a number between 0.0 and 1.0. This is the JPEG quality level, with 1.0 meaning very high quality and a very large image and nearer to 0.0 meaning lower quality smaller image.

So, for example, you could try:

data = downsizedCanvas.toDataURL("image/jpeg", 0.2);

Here's a description in the w3c reference: www.w3.org: toDataURL

It looks like there has been a bug in Firefox to do with ignoring the quality, so you might need to test in some modern browsers.

来源：https://stackoverflow.com/questions/7168375/html5-canvas-resize

html resize 最小,Html5 Canvas resize相关推荐

基于php的地铁查询系统,HTML5 Canvas实现交互式地铁线路图
这篇文章给大家介绍的文章内容是关于基于 HTML5 Canvas 的交互式地铁线路图,有很好的参考价值,希望可以帮助到有需要的朋友. 前言前两天在 echarts 上寻找灵感的时候,看到了很多有关地 ...
520表白html,html5 canvas全屏的520爱心表白网页代码
特效描述:html5 canvas全屏 520爱心表白网页代码.html5 canvas制作520表白日,全屏的爱心和表白语网页动画代码,浪漫的520爱心表白动画特效. 代码结构 1. HTML代码 ...
如何使用HTML5 Canvas元素来裁剪图像
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动.调整大小和裁剪图像,这些技术适用于图片编辑器.照片分享等应用场景.借助HTML5 Canvas绘图功能,可以在浏览器端以比较简 ...
html 流动效果,html5 canvas流动的海浪特效
特效描述:html5canvas 流动的海浪特效.html5 canvas流动的海浪特效代码结构 1. 引入JS 2. HTML代码 'use strict'; var gui = new dat. ...
html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
html5 canvas 图片移动端,支持移动端的HTML5 Canvas逼真黑板特效
插件描述:这是一款使用HTML5 Canvas制作的黑板特效,该黑板特效支持手机移动端,它能模拟使用粉笔在黑板上写字的效果. 这是一款使用HTML5 Canvas制作的黑板特效,该黑板特效支持手机移动 ...
html5 运动轨迹绘画,html5 canvas行星运动轨迹动画特效
特效描述:html5 canvas 行星运动轨迹动画特效.html5运动轨迹,行星动画特效代码结构 1. 引入JS 2. HTML代码 Your browser doesn't support c ...
php项目网页音乐播放器插件,基于HTML5 canvas和Web Audio的音频播放器插件
wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web A ...
android 漩涡动画,html5 canvas酷炫的粒子漩涡动画特效
特效描述:html5 canvas 粒子漩涡动画特效.html5粒子漩涡动画,酷炫的粒子动画特效代码结构 1. HTML代码 function project3D(x,y,z,vars){ var ...

html resize 最小,Html5 Canvas resize

html resize 最小,Html5 Canvas resize相关推荐

最新文章

热门文章