`
wangchangshuai0010
  • 浏览: 123160 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

关于Canvas 保存的图片的面积与存储大小关系

 
阅读更多

最最近在做android图像处理工具,用主要用Canvas来进行各种操作,当保存到手机存储卡中后,仔细分析图片的存储大小,发现图片的存储大小只和图片的面积成线性关系(前提是处理同一图片)

即:

设要保存的一种大小的图片的面积为S1,存储大小为storage1,要保存的另一种一种大小的图片的面积为S2,存储大小为storage1,则有:


S1 storage1

————— = —————

S2 storage2


当然了面积大的效果好,这点毋庸置疑,生成的图片如下


上传的图片如下

面积大的为hello1(500*500),面积小的为hello2(250*250)

分享到:
评论

相关推荐

    js实现canvas保存图片为png格式并下载到本地的方法

    JavaScript中实现canvas保存图片为PNG格式并下载到本地的方法涉及到几个关键步骤和函数。首先,canvas元素允许我们进行图形绘制操作,并可以将绘制的内容导出为图像。这个过程可以分为以下几个步骤:在canvas上进行...

    html2canvas实现将dom生成图片并保存至本地

    HTML2canvas是一个JavaScript库,它的主要功能是将网页的DOM结构转换为Canvas图像,从而能够进一步将这些图像保存为图片格式,例如JPEG、PNG等。这个过程通常被称为DOM截图或者网页截图。它允许用户在不借助服务器端...

    微信小程序之通过Canvas生成图片保存到手机相册

    而将Canvas中的内容生成为图片并保存至用户手机相册,则是开发者经常遇到的需求。本篇将详细介绍如何在微信小程序中利用Canvas实现这一功能。 首先,我们需要了解Canvas的基本用法。Canvas是一个画布元素,它允许...

    微信小程序实现 用canvas 生成图片 并保存

    在微信小程序中,使用canvas生成图片并保存是一个常见的需求,比如创建个性化的用户头像或者制作有趣的互动体验。本文将详细讲解如何通过微信小程序的API和canvas元素来实现这一功能。 首先,我们要了解微信小程序...

    html2canvas.js 长按页面保存为图片的功能实现

    长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能...

    canvas生成图片 将输入框的文字生成一张图片 生成祝福和签名 并保存到本地相册图库

    首先,获取`<canvas>`元素,然后设置其尺寸以适应图片大小。再创建2D渲染上下文,用于在画布上绘图。 ```javascript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // ...

    基于html2canvas将当前页面保存为图片Demo

    基于这个库,我们可以实现用户在网页上操作后,将整个页面保存为一张图片,为用户提供一种便捷的保存和分享方式。 在"基于html2canvas将当前页面保存为图片Demo"的项目中,你将找到html2canvas的插件脚本和一个简单...

    微信小程序 实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册

    例如,我们可以先获取图片的原始尺寸,然后根据canvas的实际大小计算出合适的缩放比例,确保图片按比例绘制。 2. **加载图片** 在微信小程序中,不能直接将图片URL赋值给canvas的drawImage方法。我们需要先使用`wx...

    html5 canvas 图片压缩

    图片压缩的核心在于将图片绘制到Canvas上时,可以指定绘制的宽度和高度,这实际上就是一种简单的缩放过程。然后我们可以使用`toDataURL()`方法将Canvas内容转换为Base64编码的data URL,这个URL可以代表一个压缩后的...

    Canvas画布图片文字拼接合成,生成图片

    其中,`x`和`y`是图片左上角坐标,`width`和`height`可调整图片大小。 3. **文字绘制** 使用`fillText()`方法在Canvas上绘制文字。例如: ```javascript ctx.font = '30px Arial'; // 设置字体样式 ctx....

    canvas电子签名,支持保存签名图片

    以上就是关于“canvas电子签名,支持保存签名图片”的核心知识点。通过canvas,我们可以实现用户友好的电子签名功能,同时保证数据的安全性和可追溯性。在实际项目中,可以根据需求进一步定制和扩展这些功能,提升...

    html2canvas将HTML内容写入Canvas生成图片 uniapp

    HTML2canvas是一个JavaScript库,它的主要功能是在浏览器环境中将HTML内容转换为Canvas图像,从而能够进一步将这些图像保存为图片格式,如JPEG、PNG等。这个工具在Web开发中非常实用,尤其对于需要在客户端生成屏幕...

    html页面保存为canvas图片

    HTML页面保存为canvas图片是一种常见的前端技术需求,它允许用户将网页内容转化为图像,以便于分享、打印或进一步处理。这个过程通常涉及到HTML、CSS、JavaScript以及Canvas API的使用。`html2canvas`是一个非常实用...

    canvas图片旋转自适应容器宽度实践

    最后,为了让图片始终适应容器宽度,我们需要在旋转后调整Canvas的大小。由于旋转后图片的宽高可能会改变,我们需要动态计算新的宽度和高度,保持等比缩放: ```javascript function resizeCanvasToFitImage() { ...

    使用CANVAS将网页以图片的格式存到服务器端

    标题中的“使用CANVAS将网页以图片的格式存到服务器端”是指利用HTML5的Canvas元素,配合JavaScript技术,将当前网页的可视内容捕获并转换为图像文件,然后通过Ajax或其他HTTP请求发送到服务器进行存储。这个过程...

    html2canvas 网页对图片加水印

    // 可以将生成的带水印的图片保存或展示 } }); ``` 5. **处理图片格式和质量**:HTML2Canvas默认生成的是PNG格式,如果需要其他格式(如JPEG),可以在调用`toDataURL`时指定。同时,可以通过`onrendered`回调...

    原生js+canvas实现图片裁剪

    图片裁剪的核心在于两个主要步骤:图片加载和绘制到canvas以及使用`clip()`方法定义裁剪区域。 1. 图片加载和绘制: 首先,创建一个`Image`对象并设置其`src`属性为要裁剪的图片URL。当图片加载完成后,使用`...

    电脑端canvas签名保存图片.rar

    在电脑端实现canvas签名并保存图片的技术涉及到HTML5、JavaScript(JS)、PHP等多种技术的结合。这个项目的主要目的是创建一个用户可以在电脑上签名,然后将签名图像保存到服务器的交互功能。以下是对这一过程的详细...

    HTML5 canvas 图片裁剪 图片裁切

    5. **创建新canvas**:为了保存裁剪后的图片,创建一个新的canvas元素,其大小等于裁剪区域的宽高。 6. **绘制裁剪图片**:在这个新canvas上,调用`putImageData()`,传入之前获取的像素数据,这样就得到了裁剪后的...

    html2canvas生成图片案例

    它使用html2canvas将id为'capture'的div元素转换为Canvas,然后将Canvas转换为data URL,这个URL可以直接作为图片显示或者保存。 值得注意的是,html2canvas并不完美,可能存在一些渲染不准确的情况,例如某些CSS3...

Global site tag (gtag.js) - Google Analytics