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>

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

0 个答案: