Canvas drawImage() 方法实现图片压缩_canvas drawimage 缩放_前端码农小王的博客

图片压缩原理

1.CanvasRenderingContext2D.drawImage() 方法可以从页面 DOM 元素作为图像源来根据坐标和大小重新绘制该图像。
2.HTMLCanvasElement.toDataURL() 和 HTMLCanvasElement.toBlob() 方法支持导出为 base64 字符串或 Blob 对象。
CanvasRenderingContext2D.drawImage()

drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 
image* 绘制到上下文的元素。允许任何的画布图像源，包括 canvas、img、svg、video 元素和 ImageBitmap 对象等。
dx, dy, dWidth, dHeight* 这几个属性表示在 canvas 画布上指定一片区域用来放置图片，dx、dy 指定图片的左上角在 canvas 上的坐标，dWidth、dHeight 指定图片在 canvas 上绘制的区域宽高。如果没有指定 sx、sy、sWidth、sHeight 这4个参数，则图片会被拉伸或缩放在 canvas 区域内。
sx, sy, swidth, sheight* 这几个属性是针对图片元素的，表示图片在 canvas 画布上显示的大小和位置。sx、sy 表示在图片上作为左上角的坐标，然后往右下角方向 swidth、sheight 尺寸范围作为最终在 canvas 上显示的图片内容。 
图片压缩，需要使用的是 CanvasRenderingContext2D.drawImage() 5个参数的语法，即指定图片的左上角在 canvas 上的坐标为 0 0，图片在 canvas 上绘制的区域宽高为 canvas 的宽高。例如，图片的原始尺寸是 4000*3000，现在要把尺寸限制为 400*300 大小。 
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 300;
context.drawImage(img,0,0,canvas.width,canvas.height); 
 如果需要将转换后的图像渲染到页面 DOM 元素，可以使用 HTMLCanvasElement.toDataURL() 方法来获取转换后的图像 base64 格式信息的字符串传递给 img 元素的 src。或使用 HTMLCanvasElement.toBlob() 方法获取 Blob 格式的对象，然后使用 URL.createObjectURL() 获取对象 URL 传递给 img 元素的 src。也可以将该 base64 字符串或 Blob 对象上传到后端服务器。 
HTMLCanvasElement.toDataURL()
 
该方法将图片转换成 base64 格式信息的字符串表示法。 
toDataURL()
toDataURL(type)
toDataURL(type, encoderOptions) 
type 可选* 图片格式，默认为 image/png。File 或 Blob 对象中的 type 属性可以传到此参数。
encoderOptions 可选* 在指定图片格式为 image/jpeg 或 image/webp 时，可以从 0 到 1 的区间内选择图片的质量。默认值 0.92 是一个比较合理的图片质量输出参数，通常情况下，我们无需再设定。如果超出取值范围，或使用其他类型参数会被忽略。 
HTMLCanvasElement.toBlob()
 
比 HTMLCanvasElement.toDataURL() 方法多了一个 callback 参数，其他参数相同。
该方法是异步的，无返回值，需要在 callback 回调方法中处理转换结果。
callback 回调方法参数是转换好的包含 canvas 画布上的图像的 Blob 对象，如果图像未被成功创建，可能会获得 null 值。 
toBlob(callback)
toBlob(callback, type)
toBlob(callback, type, quality) 
下面原始图片 1920*1200 的大小为 84867 字节（大约 83KB），压缩成 400*300 后大小仅为 16354 字节（约 16KB）。 
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
 
 
 
  
 有需要的小伙伴，可以点击下方卡片领取，无偿分享 
				canvas的drawImage()是提供了更多的在canvas上绘制图像的方法，使用drawImage()方法可以在画布上绘制图像，其他画布的内容，视频的某一帧的图像等，也可以裁剪画其中的一部分。
一、drawImage()语法
drawImage(image，sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)；
1、image：image是画布绘制的图像源，绘制到画布上的元素，可以是canvasElement,imageElement,s
				学习微信游戏开发时，加载本地图片报错，发生两个错误记录如下：
1.GET http://127.0.0.1:57967/res/background.png 403 (Forbidden)
查询了各种资料，没有找到相关文档，后面看了下图片路径 image.src=‘…/res/background.png’，报着试的态度改成 image.src=‘res/background.png’;，结果运行成功，不知道是什么原因，有知道的朋友帮忙指导下，可能是微信开发者工具升级导致的bug？
let image=wx
canvas很有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。
一旦获得了源图对象，我们就可以使用drawImage方法将它渲染到 canvas 里。
drawImage方法有三种形态：
drawImage(image, dx, dy) 在画布指定位置绘制原图
drawImage(i...
				HTML5 file API加canvas实现图片前端JS压缩
要想使用JS实现图片的压缩效果，原理其实很简单，核心API就是使用canvas的drawImage()方法；
canvas的drawImage()方法API如下：
context.drawImage(img, dx, dy);
context.drawImage(img, dx, dy, dWidth, dHeight);
context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidt
				在绘制图片时，当我将四张小图贴在一张大图的四个角时，当我使用drawimage(Image,point)绘制时，发现图片被放大了，当我指定绘制区域后正常了。具体原因如下（参考MSDN）：
在绘制图像时，GDI+ 可能会自动缩放图像，这将会导致性能降低。 另外，也可以通过将目标矩形的尺寸传递给 DrawImage 方法来控制图像的缩放。
例如，以下对 DrawImage 方法的调用指定左上角的位置为 (50, 30)，但是未指定目标矩形。
e.Graphics.DrawImage(image, 50.
				1.创建一个list，用于记录缩放状态。 public List zoomList = new List(); 
2.创建一个位图文件，用于存放缩放后的最新图片。 public Bitmap globalBitMap;3.图片缩小代码：   zoomList.Add(-1);
   if (zoomList.Count > 0 && zoomList.Count(p => p >
				在使用Canvas绘图的过程中，对于drawImage()方法，我们需要确保绘制的图像可以适应不同的设备和浏览器大小，以达到自适应的效果。下面是一些实现自适应drawImage()方法的方法：
1.使用缩放因子：我们可以通过计算画布和图像的缩放因子，将图像按比例缩放，以适应不同设备和浏览器大小。
2.设置画布大小：我们可以通过设置画布的宽度和高度，以适应不同的设备和浏览器大小。
3.使用CSS样式：使用CSS样式可以对Canvas进行自定义样式设置，例如设置宽度和高度为100%，可以实现 Canvas 自适应效果。
4.动态调整：我们可以通过 JavaScript 监听窗口大小变化事件，以动态调整 Canvas 的宽度和高度，以适应不同的设备和浏览器大小。
以上这些方法可以使Canvas绘图具有自适应的效果，确保Canvas可以在不同设备和浏览器大小下进行绘图。同时，在实际应用中，我们需要根据不同的需求和情况，选择最适合的自适应方法。