canvas改变画布大小内容消失
微wx笑
2022-07-16【前端开发】
5
0关键字：
canvas
canvas宽高改变后,画布上的内容消失了
当你有个某种需求，需要改变canvas宽高时，你会发现，画布上的内容没了，这是因为canvas的大小改变后会自动清除内容的，这时候我们需要重新绘制画布。
canvas宽高改变后,画布上的内容消失了
当你有个某种需求，需要改变canvas宽高时，你会发现，画布上的内容没了，这是因为canvas的大小改变后会自动清除内容的，这时候我们需要重新绘制画布。
最近使用jQuery.qrcode生成的二维码还希望在上面添加点文字提示，结果代码写好了，测试发现内容一片空白！
反复调试发现只要改变画布的大小，内容就消失不见了，怎么解决呢？
解决方法：
使用getImageData方法先保存画布，然后使用putImageData方法，将保存的数据放回画布；
相关代码：
$(function () {
var rlt = $('#app').qrcode({ width: 200, height: 200, text:"<?=$url?>" });
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext('2d');
var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height); // 保存画布
canvas.width = 200;
canvas.height = 230;
//设置画布背景
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.putImageData(canvasData, 0, 0); // 改变完宽高后，重绘画布
//设置文字样式
ctx.fillStyle = '#000000';
ctx.font = 'bold ' + 16 + 'px Arial';
ctx.textAlign = 'center';
//文字描述
ctx.fillText("识别二维码查看账单", 100, 220);
var img = document.createElement("img");
img.src = canvas.toDataURL();
$('#app').append(img);
canvas.style.display = "none";
});相关参考：
HTML canvas putImageData() 方法
定义和用法
putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。
提示：请参阅 getImageData() 方法，它可复制画布上指定的矩形的像素数据。
提示：请参阅 createImageData() 方法，它可创建新的空白 ImageData 对象。
JavaScript 语法：
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
参数值
| 参数 | 描述 |
|---|---|
| imgData | 规定要放回画布的 ImageData 对象。 |
| x | ImageData 对象左上角的 x 坐标，以像素计。 |
| y | ImageData 对象左上角的 y 坐标，以像素计。 |
| dirtyX | 可选。水平值（x），以像素计，在画布上放置图像的位置。 |
| dirtyY | 可选。水平值（y），以像素计，在画布上放置图像的位置。 |
| dirtyWidth | 可选。在画布上绘制图像所使用的宽度。 |
| dirtyHeight | 可选。在画布上绘制图像所使用的高度。 |
HTML canvas getImageData() 方法
定义和用法
getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。
提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。
例子：
以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息：
red=imgData.data[0]; green=imgData.data[1]; blue=imgData.data[2]; alpha=imgData.data[3];
提示：您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。
使用该公式遍历所有的像素，并改变其颜色值：
red=255-old_red; green=255-old_green; blue=255-old_blue;
（请见下面的“亲自试一试”实例。）
JavaScript 语法
var imgData=context.getImageData(x,y,width,height);
参数值
| 参数 | 描述 |
|---|---|
| x | 开始复制的左上角位置的 x 坐标。 |
| y | 开始复制的左上角位置的 y 坐标。 |
| width | 将要复制的矩形区域的宽度。 |
| height | 将要复制的矩形区域的高度。 |
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2022-07-16/1313.html
