带有输入文本的HTML5 Canvas图像绘制

Question

I am new to Canvas and I have a task where I have an input box to input a text. 我是Canvas的新手，我有一个任务，其中有一个输入框来输入文本。 then I upload an image.When the image is displayed, it should have the text repeated in the background. 然后我上传一张图片。当图片显示时，它应该在后台重复文字。

So far I have been able to upload the image and slightly grey scale it, but I do not know how to to use the text to be repeate din the background 到目前为止，我已经能够上传图像并对其进行稍微灰度化，但是我不知道如何使用文本在背景中重复

It would be great if someone could point me in the direction of what to do next.-Thanks 如果有人能指出下一步的方向，那就太好了。

my code so far: 到目前为止我的代码：

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

Answer 1

I'm not sure it is exactly what you want but from your given code, and what you asked, here is a solution : 我不确定这是否正是您想要的，但是根据给定的代码和您的要求，这是一个解决方案：

You can first draw your text in a new canvas, and use it as a pattern to your main one. 您可以先在新的画布上绘制文本，然后将其用作主要画布上的图案。 Then, thanks to context2d's globalCompositeOperation set to 'destination-in' , you can keep only the text pattern over your image. 然后，由于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>

Note : I also fixed your grayscale function, to avoid the maybe not desired moiré effect. 注意：我还修复了您的灰度功能，以避免可能不希望的波纹效果。

带有输入文本的HTML5 Canvas图像绘制

问题描述

1 个解决方案

解决方案1
0 2015-08-26 07:49:46

带有输入文本的HTML5 Canvas图像绘制

问题描述

1 个解决方案

解决方案1 0 2015-08-26 07:49:46

解决方案1
0 2015-08-26 07:49:46