canvas绘制图像文字并重新转化为新图像

发布时间：2020-12-15 00:26:41 所属栏目：C语言来源：网络整理

导读：前言这两天用canvas开发了一个海报生成器，这是第一次使用canvas，特此做点简单的笔记，备查。需求简述：用户选择一张图片，输入一些文字，点击提交时将这些信息按规定的形式组合生成可保存的图片，要求对用户所选择的图片做黑白处理，以突出文字。开发分

前言

这两天用canvas开发了一个海报生成器，这是第一次使用canvas，特此做点简单的笔记，备查。

需求简述：用户选择一张图片，输入一些文字，点击提交时将这些信息按规定的形式组合生成可保存的图片，要求对用户所选择的图片做黑白处理，以突出文字。

开发分析
1、获取上传的图片和文字信息，使用canvas的方法绘制；
2、将用户上传的图片做黑白处理；
3、将canvas的内容生成新的图片。

canvas绘制图片和文字

Step 1 创建一个canvas元素

标签中的内容只有在浏览器不支持canvas时才会显示（IE9+支持）

Step 2 JavaScript绘图
获取canvas绘图的cantext对象：


参数2d表示该节点用于生产2D图案（平面图案），如果是“webgl”则表示生成3D图像，具体可了解WebGL API，未深究。
绘制图像：

建立一个Image对象，赋值其src，然后用drawImage()方法绘制；参数分别为图像、坐标位置、在画布上所占大小。


固定的图片可以先放到隐藏的html元素里，再获取后用drawImage()方法绘制。
绘制文字：

要绘制其他颜色及大小的字体，只需重新设置当前画笔的颜色大小，然后绘制即可（此时觉得以前做过的图形学实验派上了用场，思路一样）
详细的绘图属性与方法可查阅
对图像做黑白处理
canvas通过getImageData()方法和putImageData()方法，可以处理每个像素，并重新绘制处理后的效果。
黑白效果即取其红绿蓝3个像素值的算术平均值。
var grayScale = function (pixels) {

var d = pixels.data;
for (var i = 0; i < d.length; i += 4) {

var r = d[i];

var g = d[i + 1];

var b = d[i + 2];

d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3;

}
return pixels;
};

更多canvas像素处理方法可查阅
将canvas内容生成新的图片
canvas的toDataURL()方法，可以将canvas数据转换为一般的图像文件形式。


未深究：Canvas SecurityError报错
开发中途遇此问题，一知半解，暂且先记录下当前了解的。
报错：
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HtmlCanvasElement': Tainted canvases may not be exported.
报错原因：使用不经CORS许可的图片污染了画布，从而无法使用其toDataURL()等方法；
相关链接






                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!