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

Question

我是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>

Answer 1

我不确定这是否正是您想要的，但是根据给定的代码和您的要求，这是一个解决方案：

您可以先在新的画布上绘制文本，然后将其用作主要画布上的图案。 然后，由于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>

注意：我还修复了您的灰度功能，以避免可能不希望的波纹效果。

带有输入文本的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