我是 Canvas 新手，我有一个任务，需要一个输入框来输入文本。然后我上传一张图片。当显示图片时，它应该在背景中重复文字。
到目前为止，我已经能够上传图像并将其稍微灰度化，但我不知道如何使用文本在背景中重复
如果有人能指出我下一步该做什么，那就太好了。-谢谢
到目前为止我的代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var source = document.getElementById('fileupload');
source.addEventListener('change',handleImage,false);
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
context.drawImage(img,0,0);
grayScale(context, canvas);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
function grayScale(context, canvas) {
var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imgData.data;
for (var i = 0, n = pixels.length; i < n; i += 4) {
pixels[i]+=20;
var grayscale = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) /3;
pixels[i*4 ] = grayscale; // red
pixels[i*4+1] = grayscale+30; // green
pixels[i*4+2] = grayscale; // blue
// pixels[i+3] = 0.5; // is alpha
}
//redraw the image in black & white
context.putImageData(imgData, 0, 0);
}
})
</script>
<input type="text" id="textcontent">
<input type="range" id="slider">
Background<input type="checkbox" id="background">
Select file: <input id="fileupload" type="file" multiple>
<canvas id='canvas' width="800" height ="800"></canvas>
</body>
</html>
最佳答案
我不确定这是否正是您想要的，但根据您给定的代码以及您的要求，这是一个解决方案:
你可以先draw your text在新 Canvas 中，并将其用作 pattern到你的主要的。然后，感谢 context2d 的 globalCompositeOperation设置为'destination-in'，您可以仅保留图像上的文本图案。
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var source = document.getElementById('fileupload');
source.addEventListener('change', handleImage, false);
var slider = document.getElementById('slider');
slider.onchange = handleImage;
var inputText = document.getElementById('textcontent');
inputText.onchange = handleImage;
function handleImage(e) {
if (source.files.length < 1) return;
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, 0, 0);
grayScale(context, canvas);
textBackground();
}
img.src = event.target.result;
}
reader.readAsDataURL(source.files[0]);
}
function grayScale(context, canvas) {
var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imgData.data;
for (var i = 0, n = pixels.length; i < n; i += 4) {
pixels[i] += 20;
var grayscale = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
pixels[i] = grayscale; // red
pixels[i + 1] = grayscale + 5; // green
pixels[i + 2] = grayscale; // blue
// pixels[i+3] = 0.5; // is alpha
}
//redraw the image in black & white
context.putImageData(imgData, 0, 0);
}
function textBackground() {
var txt = inputText.value;
if (!txt) return;
var fontSize = +slider.value;
var c = document.createElement('canvas'),
ctx = c.getContext('2d');
var check = document.getElementById('background').checked;
//set the fontSize so we are able to set our canvas size
ctx.font = fontSize + "px Arial";
c.width = ctx.measureText(txt).width + fontSize;
c.height = fontSize;
// set it again since the change of width has reset it
ctx.font = fontSize + "px Arial";
ctx.fillText(txt, 0, fontSize);
// draw our text
var pattern = context.createPattern(c, 'repeat');
// set our main canvas fillStyle to our newly created pattern
context.fillStyle = pattern;
// should we keep only the text or draw the text over the image
context.globalCompositeOperation = check ? 'destination-in' : 'source-over';
context.fillRect(0, 0, canvas.width, canvas.height);
// reset the context
context.globalCompositeOperation = 'source-over';
context.fillStyle = "#000";
}<input type="text" id="textcontent">
<input type="range" id="slider" min=4 max=40 value=6>Background
<input type="checkbox" checked id="background">Select file:
<input id="fileupload" type="file" multiple>
<canvas id='canvas' width="800" height="800"></canvas>注意:我还修复了您的灰度函数，以避免出现可能不需要的摩尔纹效果。
关于javascript - HTML5 Canvas 图像绘制与输入文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32217379/