Fatal编程技术网
  • javascript/
  • Javascript 使用输入文本绘制HTML5画布图像

Javascript 使用输入文本绘制HTML5画布图像

javascript html canvas html5-canvas

Javascript 使用输入文本绘制HTML5画布图像,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,我是画布新手，我有一个任务，我有一个输入框来输入文本。然后我上传一张图片。当图片显示时，它应该在背景中重复文本 到目前为止，我已经能够上传图像和轻微的灰度它，但我不知道如何使用文本在背景中重复 如果有人能告诉我下一步该做什么，那就太好了。-谢谢 到目前为止，我的代码是： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></t

我是画布新手，我有一个任务，我有一个输入框来输入文本。然后我上传一张图片。当图片显示时，它应该在背景中重复文本

到目前为止，我已经能够上传图像和轻微的灰度它，但我不知道如何使用文本在背景中重复

如果有人能告诉我下一步该做什么，那就太好了。-谢谢

到目前为止，我的代码是：

<!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>


document.addEventListener（'DOMContentLoaded'，function（）{
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
var source=document.getElementById（'fileupload'）；
source.addEventListener（'change'，handleImage，false）；
函数handleImage（e）{
var reader=new FileReader（）；
reader.onload=函数（事件）{
var img=新图像（）；
img.onload=函数（）{
背景图像（img，0,0）；
灰度（上下文、画布）；
}
img.src=event.target.result；
}
reader.readAsDataURL（e.target.files[0]）；
}
函数灰度（上下文、画布）{
var imgData=context.getImageData（0，0，canvas.width，canvas.height）；
var像素=imgData.data；
对于（变量i=0，n=pixels.length；i
我不确定这是否正是您想要的，但根据您给定的代码，以及您提出的问题，这里有一个解决方案：

你可以先在一个新的画布上，把它作为你的主画布的一部分。然后，由于context2d设置为
“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；
函数handleImage（e）{
if（source.files.length<1）返回；
var reader=new FileReader（）；
reader.onload=函数（事件）{
var img=新图像（）；
img.onload=函数（）{
context.fillRect（0,0，canvas.width，canvas.height）；
drawImage（img，0,0）；
灰度（上下文、画布）；
textBackground（）；
}
img.src=event.target.result；
}
reader.readAsDataURL（source.files[0]）；
}
函数灰度（上下文、画布）{
var imgData=context.getImageData（0，0，canvas.width，canvas.height）；
var像素=imgData.data；
对于（变量i=0，n=pixels.length；i

背景
选择文件：
我不确定这是否正是您想要的，但根据您给定的代码，以及您提出的问题，这里有一个解决方案：

你可以先在一个新的画布上，把它作为你的主画布的一部分。然后，由于context2d设置为
“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；
函数handleImage（e）{
if（source.files.length<1）返回；
var reader=new FileReader（）；
reader.onload=函数（事件）{
var img=新图像（）；
img.onload=函数（）{
context.fillRect（0,0，canvas.width，canvas.height）；
drawImage（img，0,0）；
灰度（上下文、画布）；
textBackground（）；
}
img.src=event.target.result；
}
reader.readAsDataURL（source.files[0]）；
}
函数灰度（上下文、画布）{
var imgData=context.getImageData（0，0，canvas.width，canvas.height）；
var像素=imgData.data；
对于（变量i=0，n=pixels.length；i