canvas中的imageData如何缩放_H5之家 - 中国HTML5教程资源分享第一站

canvas中的imageData如何缩放

现在有一个需求
在canvas A上getImageData(0,0,200,200)获取到一个裁剪后的imageData，
然后在canvas B（width=100 height=100）上putImageData ，但是需要是等比例缩放后的iamgeData。

我现在的做法是新建一个虚拟的canvas设置width=200,height=200，
然后放入刚才得到的imageData，再通过一个toDataURL 放到一个image对象上，
改变这个image对象的width 和 height， width = 100， height = 100，
再通过drawImage(image,0,0,100,100)绘制到canvas B上。

但是使用上觉得有点卡顿，请问有更好的办法吗

如果你的canvas A是从某个图片源img通过drawImage绘制的，那么你可以在canvas B上同样使用drawImage，将canvas A的图片源img剪切、缩放再绘制到canvas B上

canvas, javascirpt对象

更多相关文章

HTML 5 的 Canvas 中应用卷积矩阵对图像处理

本文章给大家介绍HTML 5 的 Canvas 中应用卷积矩阵对图像处理,有需要了解学习的同学可进入参考.HTML 5中的 canvas 元素是相当强大的,利用他的 getImageData 方法可以对载入的图像直接进行位图操作.但是直接对位图进行操作比较麻烦,如果利用卷积矩阵这个工具的话,可以通过 ...

我在canvas中插入一个图片，如何控制图片大小

var canvas = document.getElementById("canvas"), ctx = canvas.getContext('2d'), img = new Image(); img.src="xxx.png"; img.onload = ...

canvas中使用destination-out去掉的部分为什么显示的是背景色，而不是透明的

canvas中使用destination-out去掉的部分为什么显示的是背景色,而不是透明的? 代码放在: 如果把图片不放在canvas可以实现我想要的功能,但是加入我需要把这个图片放在canvas中, 应该如何处理呢? 类 ...

如何在canvas中填充汉字的时候让其换行

如何在canvas中填充汉字的时候让其换行? 要自行拆分数组每一行能写多少字要用mesure来量然后拆分成一个个数组每一行输出时设定输出的起点i(行数)*20 行高问题不够详细啊

canvas中使用中文字体如何处理

canvas中如果需要使用大量中文字体该如何处理? var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.font = ...