Question

我正在执行以下脚本，以便使用Javascript将图像转换为灰度。

<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
  function drawImage(imageObj) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = 69;
    var y = 50;

    context.drawImage(imageObj, x, y);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
      // red
      data[i] = brightness;
      // green
      data[i + 1] = brightness;
      // blue
      data[i + 2] = brightness;
    }

    // overwrite original image
    context.putImageData(imageData, x, y);

  }

  var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);

  };
  imageObj.src = 'text.png';
</script>

每当我更改imageObj.src时，我的浏览器都会以灰度显示指示的图像。但是，我想要的只是当我点击某种按钮时才显示转换后的图像。鉴于我的图像是在脚本开头上传的。

我试过

<button onclick="drawimage(uploadedFile)">Here</button>

它实际上并没有起作用。我还想在我的其余代码中使用新转换的图像（将其存储在某种变量中），但仍然无法找到一种方法。谢谢你帮助我！

Answer 1

onload（）没有触发，因为图像永远不会被加载。你应该做一个ajax请求来加载图像并在回调中使用你的函数

Answer 2

这就是我使用的。希望这会有所帮助。

<html>
    <head>
        <title>Canvas</title>
    </head>
    <body>
        <input id="upload_file" type="file">
        <button id="convert_button" onclick="convert()">Convert</button>
        <a onclick="downloadimage(this)">Download image</a>
        
        <script>
            var upload_file_input = document.getElementById("upload_file");
            upload_file_input.addEventListener("change",upload);
            
            var bodyelem = document.getElementsByTagName("body")[0];
            var canvas = document.createElement("canvas");
            canvas.setAttribute("id","main_canvas");
            var context = canvas.getContext("2d");
            function upload(e)
            {
                var reader = new FileReader();
                reader.onload = function(event){
                    var img = new Image();
                    img.onload = function(){
                        canvas.width = img.width;
                        canvas.height = img.height;
                        context.drawImage(img,0,0);
                    }
                    img.src = event.target.result;
                }
                reader.readAsDataURL(e.target.files[0]);
                var canvaselem = document.getElementById("main_canvas");
                canvaselem && bodyelem.removeChild(canvaselem);
                bodyelem.appendChild(canvas);
            }
            function convert()
            {
                var imagedata = context.getImageData(0,0,canvas.width,canvas.height);
                var data = imagedata.data;
                for(var i = 0,n=data.length;i<n;i+=4)
                {
                    var average = data[i]*0.3 +data[i+1]*0.59 + data[i+2]*0.11;
                    data[i] = data [i+1] = data[i+2] = average;
                }
                
                context.putImageData(imagedata,0,0,0,0,imagedata.width,imagedata.height);
            }
            function downloadimage(elem)
            {
                var image = canvas.toDataURL();
                elem.href = image;
                var imagename = prompt("Name : ","");
                elem.download = imagename ? imagename : "image" + ".png";
            }
            
        </script>
    </body>
</html>

Answer 3

试试这个，这是一个实时版https://jsbin.com/relokugumo/1/edit?html,js,output

Html To

<canvas id="myCanvas" width="578" height="400"></canvas>
<button onclick="setImage('<?php echo $uploadefile ?>')">Here</button>

和JS To，

function setImage(imagePath){
  var imageObj = new Image();
  imageObj.src = imagePath;
  drawImage(imageObj);
}

function drawImage(imageObj) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = 69;
    var y = 50;

    context.drawImage(imageObj, x, y);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
      // red
      data[i] = brightness;
      // green
      data[i + 1] = brightness;
      // blue
      data[i + 2] = brightness;
    }

    // overwrite original image
    context.putImageData(imageData, x, y);

  }

将图片src传递给onclick

3 个答案: